From 875d3d03611330c4365c26804eb8b0596ea03a55 Mon Sep 17 00:00:00 2001 From: shahondin1624 Date: Fri, 13 Mar 2026 13:09:27 +0100 Subject: [PATCH] feat: responsive attribute card layout with fluid scaling (Closes #5) Replace hardcoded Modifier.width(90.dp) with Modifier.weight(1f) so attribute name text fills available space. Add TextOverflow.Ellipsis and maxLines=1 as safety net. Cards now render correctly from compact (~140dp) to expanded (~300dp) widths without truncation. Co-Authored-By: Claude Opus 4.6 --- .../attributespage/Attribute.kt | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Attribute.kt b/sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Attribute.kt index ab7c553..c97339a 100644 --- a/sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/Attribute.kt +++ b/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, - horizontalArrangement = Arrangement.Start + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.Start, + modifier = Modifier.fillMaxWidth() ) { - Row(modifier = Modifier - .padding(horizontal = SMALL_PADDING) - .background(attribute.type.color, shape = androidx.compose.foundation.shape.RoundedCornerShape(4.dp)) - .clip(androidx.compose.foundation.shape.RoundedCornerShape(4.dp)), - horizontalArrangement = Arrangement.SpaceBetween) { + Row( + modifier = Modifier + .weight(1f) + .padding(horizontal = SMALL_PADDING) + .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( } } } -} \ No newline at end of file +}