feat: responsive attribute card layout with fluid scaling (Closes #5) (#46)

sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Attribute.kt

@@ -3,6 +3,7 @@ package org.shahondin1624.lib.components.charactermodel.attributespage
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -10,12 +11,14 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import org.jetbrains.compose.resources.painterResource
 import org.shahondin1624.lib.components.TestTags
@@ -37,28 +40,37 @@ fun Attribute(
     val textColor = if (isInDarkMode) Color.Black else Color.White
     Card(modifier = Modifier.testTag(TestTags.attributeCard(attribute.type.name))) {
         Row(
-            verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
+            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Start
+            horizontalArrangement = Arrangement.Start,
+            modifier = Modifier.fillMaxWidth()
         ) {
-            Row(modifier = Modifier
+            Row(
-                .padding(horizontal = SMALL_PADDING)
+                modifier = Modifier
-                .background(attribute.type.color, shape = androidx.compose.foundation.shape.RoundedCornerShape(4.dp))
+                    .weight(1f)
-                .clip(androidx.compose.foundation.shape.RoundedCornerShape(4.dp)),
+                    .padding(horizontal = SMALL_PADDING)
-                horizontalArrangement = Arrangement.SpaceBetween) {
+                    .background(attribute.type.color, shape = RoundedCornerShape(4.dp))
+                    .clip(RoundedCornerShape(4.dp)),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
                 Text(
                     text = attribute.type.name,
                     modifier = Modifier
-                        .width(90.dp)
+                        .weight(1f)
                         .padding(start = SMALL_PADDING),
                     textAlign = TextAlign.Center,
-                    color = textColor
+                    color = textColor,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
                 )
                 Text(
                     text = attribute.value.toString(),
                     modifier = Modifier
                         .padding(end = SMALL_PADDING),
                     textAlign = TextAlign.Center,
-                    color = textColor
+                    color = textColor,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
                 )
             }
             IconButton(
@@ -81,4 +93,4 @@ fun Attribute(
             }
         }
     }
-}
+}