Fix layout of throw detail card.

app/src/main/java/com/pixelized/rplexicon/ui/screens/rolls/composable/ThrowsCard.kt

@@ -9,6 +9,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -18,6 +19,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
@@ -154,7 +156,8 @@ fun ThrowsCard(
                 Text(
                     modifier = Modifier
                         .weight(1f)
-                        .padding(start = 8.dp),
+                        .padding(start = 8.dp)
+                        .horizontalScroll(state = rememberScrollState()),
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                     style = MaterialTheme.typography.titleLarge,
@@ -210,45 +213,53 @@ private fun ThrowsRollDetail(
     resultWidth: Dp,
 ) {
     Row(
-        modifier = modifier,
+        modifier = Modifier
-        horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
+            .fillMaxWidth()
+            .then(other = modifier),
+        horizontalArrangement = Arrangement.spacedBy(
+            space = 4.dp,
+            alignment = Alignment.End,
+        ),
     ) {
-        Text(
+        Row(
-            modifier = Modifier.alignByBaseline(),
+            modifier = Modifier
-            color = MaterialTheme.colorScheme.onSurface,
+                .alignByBaseline()
-            style = MaterialTheme.typography.bodySmall,
+                .weight(1f, false)
-            text = detail.title,
+                .horizontalScroll(state = rememberScrollState()),
-        )
+            horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
-        detail.throws?.let {
+        ) {
             Text(
                 modifier = Modifier.alignByBaseline(),
                 color = MaterialTheme.colorScheme.onSurface,
                 style = MaterialTheme.typography.bodySmall,
-                textAlign = TextAlign.Center,
+                text = detail.title,
-                text = "(${it.roll})",
-            )
-            Icon(
-                modifier = Modifier
-                    .size(16.dp)
-                    .align(alignment = Alignment.Bottom)
-                    .padding(bottom = 2.dp),
-                tint = when (it.type) {
-                    Type.ADVANTAGE -> MaterialTheme.lexicon.colorScheme.throwsColor.advantage
-                    Type.DISADVANTAGE -> MaterialTheme.lexicon.colorScheme.throwsColor.disadvantage
-                    Type.EMPHASIS -> MaterialTheme.lexicon.colorScheme.throwsColor.emphasis
-                    Type.NORMAL -> MaterialTheme.colorScheme.onSurface
-                },
-                painter = painterResource(id = it.dice),
-                contentDescription = null,
-            )
-            Text(
-                modifier = Modifier
-                    .alignByBaseline()
-                    .weight(1f, false),
-                color = MaterialTheme.colorScheme.onSurface,
-                style = MaterialTheme.typography.bodySmall,
-                text = it.result,
             )
+            detail.throws?.let {
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    color = MaterialTheme.colorScheme.onSurface,
+                    style = MaterialTheme.typography.bodySmall,
+                    textAlign = TextAlign.Center,
+                    text = "(${it.roll})",
+                )
+                Icon(
+                    modifier = Modifier.size(16.dp),
+                    tint = when (it.type) {
+                        Type.ADVANTAGE -> MaterialTheme.lexicon.colorScheme.throwsColor.advantage
+                        Type.DISADVANTAGE -> MaterialTheme.lexicon.colorScheme.throwsColor.disadvantage
+                        Type.EMPHASIS -> MaterialTheme.lexicon.colorScheme.throwsColor.emphasis
+                        Type.NORMAL -> MaterialTheme.colorScheme.onSurface
+                    },
+                    painter = painterResource(id = it.dice),
+                    contentDescription = null,
+                )
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    color = MaterialTheme.colorScheme.onSurface,
+                    style = MaterialTheme.typography.bodySmall,
+                    text = it.result,
+                )
+            }
         }
         Text(
             modifier = Modifier.alignByBaseline(),
@@ -328,14 +339,14 @@ private class RollToastPreviewProvider : PreviewParameterProvider<ThrowsCardUio>
             isCriticalSuccess = true,
             details = listOf(
                 ThrowsCardUio.Detail(
-                    title = "Hit Check \"Advantage\"",
+                    title = "Jet d'attaque : \"Hache de guerre\"",
                     throws = ThrowsCardUio.Throw(
                         dice = R.drawable.ic_d20_24,
                         type = Type.ADVANTAGE,
                         roll = "1d20",
-                        result = "20 ~ 5",
+                        result = "8~5 + 4~6 + 2~5",
                     ),
-                    result = "20",
+                    result = "17",
                 ),
                 ThrowsCardUio.Detail(
                     title = "Benediction",