diff --git a/feature/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/component/TimetableGridTab.kt b/feature/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/component/TimetableGridTab.kt index 263fb1743..8feffb7cf 100644 --- a/feature/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/component/TimetableGridTab.kt +++ b/feature/sessions/src/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) {