Fix skill header divider inconcistencies

app/src/main/java/com/pixelized/rplexicon/ui/screens/character/composable/actions/GenericHeader.kt

@@ -3,14 +3,17 @@ package com.pixelized.rplexicon.ui.screens.character.composable.actions
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -20,6 +23,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.pixelized.rplexicon.R
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
+import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
 import com.pixelized.rplexicon.utilitary.annotateWithDropCap
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 
@@ -30,28 +34,40 @@ fun GenericHeader(
     padding: PaddingValues = PaddingValues(horizontal = 16.dp),
     @StringRes label: Int,
 ) {
-    Column(
+    Surface(
         modifier = modifier,
     ) {
-        Surface(
+        Column(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = modifier.padding(paddingValues = padding),
         ) {
-            Text(
+            Row(
-                modifier = Modifier.padding(paddingValues = padding),
+                modifier = Modifier
-                style = MaterialTheme.typography.titleMedium,
+                    .minimumInteractiveComponentSize()
-                fontWeight = FontWeight.Bold,
+                    .fillMaxWidth(),
-                overflow = TextOverflow.Ellipsis,
+                horizontalArrangement = Arrangement.spacedBy(4.dp),
-                maxLines = 1,
+            ) {
-                text = annotateWithDropCap(
+                Text(
-                    text = stringResource(id = label),
+                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lexicon.typography.titleMediumDropCap,
+                    style = MaterialTheme.typography.titleMedium,
-                ),
+                    text = LOS_HOLLOW,
+                )
+
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 1,
+                    text = annotateWithDropCap(
+                        text = stringResource(id = label),
+                        style = MaterialTheme.lexicon.typography.titleMediumDropCap,
+                    ),
+                )
+            }
+            Divider(
+                color = MaterialTheme.lexicon.colorScheme.placeholder,
             )
         }
-        Divider(
-            modifier = Modifier.padding(paddingValues = padding),
-            color = MaterialTheme.lexicon.colorScheme.placeholder,
-        )
     }
 }
 

app/src/main/java/com/pixelized/rplexicon/ui/screens/character/composable/actions/SpellHeader.kt

@@ -13,9 +13,9 @@ import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
@@ -27,6 +27,7 @@ import androidx.compose.ui.unit.dp
 import com.pixelized.rplexicon.R
 import com.pixelized.rplexicon.ui.screens.character.composable.common.CounterButton
 import com.pixelized.rplexicon.ui.theme.LexiconTheme
+import com.pixelized.rplexicon.utilitary.LOS_HOLLOW
 import com.pixelized.rplexicon.utilitary.annotateWithDropCap
 import com.pixelized.rplexicon.utilitary.extentions.lexicon
 
@@ -49,17 +50,23 @@ fun SpellHeader(
     header: SpellHeaderUio,
     onSpell: (level: Int, value: Int, max: Int) -> Unit,
 ) {
-    Column(
+    Surface(
         modifier = modifier,
     ) {
-        Surface {
+        Column(
+            modifier = modifier.padding(paddingValues = padding),
+        ) {
             Row(
                 modifier = Modifier
-                    .fillMaxWidth()
+                    .minimumInteractiveComponentSize()
-                    .padding(paddingValues = padding),
+                    .fillMaxWidth(),
-                verticalAlignment = Alignment.CenterVertically,
                 horizontalArrangement = Arrangement.spacedBy(4.dp),
             ) {
+                Text(
+                    modifier = Modifier.alignByBaseline(),
+                    style = MaterialTheme.typography.titleMedium,
+                    text = LOS_HOLLOW,
+                )
                 Text(
                     modifier = Modifier
                         .weight(1f)
@@ -90,11 +97,10 @@ fun SpellHeader(
                     )
                 }
             }
+            Divider(
+                color = MaterialTheme.lexicon.colorScheme.placeholder,
+            )
         }
-        Divider(
-            modifier = Modifier.padding(paddingValues = padding),
-            color = MaterialTheme.lexicon.colorScheme.placeholder,
-        )
     }
 }