Merge pull request #741 from ked4ma/feature/timetable-day-tab-size

Enable to view conference day tab even if font size is large
DroidKaigi · Aug 23, 2024 · b4fc4a0 · b4fc4a0
2 parents 99f23af + 72227e3
commit b4fc4a0
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/...c/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/component/TimetableGridTab.kt b/...c/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/component/TimetableGridTab.kt
@@ -5,8 +5,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeightIn
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
@@ -17,8 +19,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.github.droidkaigi.confsched.designsystem.theme.KaigiTheme
@@ -32,17 +34,21 @@ fun TimetableDayTab(
     onDaySelected: (day: DroidKaigi2024Day) -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val density = LocalDensity.current
+    val tabWidth = with(density) {
+        // calculate width from sp
+        // NOTE: 6 is a magic number here
+        ((16.sp * 6) * fontScale).toDp()
+    }
     val selectedTabIndex = selectedDay.tabIndex()
     val selectedColor = Color(0xFF4AFF82)
     Column(
-        modifier = modifier.padding(start = 12.dp),
+        modifier = modifier.padding(top = 16.dp, start = 16.dp, end = 16.dp),
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.Start,
     ) {
         TabRow(
-            modifier = Modifier
-                .padding(horizontal = 20.dp)
-                .width(106.dp),
+            modifier = Modifier.width(tabWidth),
             selectedTabIndex = selectedTabIndex,
             indicator = @Composable { tabPositions ->
                 if (selectedTabIndex < tabPositions.size) {
@@ -60,11 +66,7 @@ fun TimetableDayTab(
                     Tab(
                         modifier = Modifier
                             .testTag(TimetableTabTestTag.plus(conferenceDay.ordinal))
-                            .padding(
-                                horizontal = 8.dp,
-                                vertical = 16.dp,
-                            )
-                            .height(26.dp),
+                            .requiredHeightIn(min = 26.dp),
                         selected = isSelected,
                         onClick = {
                             onDaySelected(conferenceDay)
@@ -90,8 +92,9 @@ private fun FloorText(
     isSelected: Boolean,
 ) {
     Text(
+        modifier = Modifier.padding(bottom = 4.dp),
         text = text,
-        fontWeight = FontWeight.W400,
+        style = MaterialTheme.typography.titleMedium,
         fontSize = 16.sp,
         lineHeight = 23.8.sp,
         color = if (isSelected) {