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 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-13 13:09:27 +01:00
parent 14f0dab046
commit 875d3d0361

View File

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