keep the tab content left-aligned so min-size centring cannot shift the icons

Replace minimumInteractiveComponentSize (which centred the whole tab content and drifted as the active label expanded) with an explicit 48dp touch target whose content is aligned to the start. The icon position no longer depends on the label width.
This commit is contained in:
austinried
2026-10-04 00:29:57 +00:00
parent ef349f0346
commit 7009aa8ef5
@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.statusBarsPadding import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.foundation.pager.rememberPagerState
@@ -52,7 +53,6 @@ import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TextField import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults import androidx.compose.material3.TextFieldDefaults
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.material3.pulltorefresh.PullToRefreshBox import androidx.compose.material3.pulltorefresh.PullToRefreshBox
import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
@@ -625,6 +625,7 @@ private val BOTTOM_CLEARANCE = 80.dp
private val TAB_BAR_CONTENT_HEIGHT = 52.dp private val TAB_BAR_CONTENT_HEIGHT = 52.dp
private val TAB_ICON_SIZE = 24.dp private val TAB_ICON_SIZE = 24.dp
private val TAB_VERTICAL_PADDING = 6.dp private val TAB_VERTICAL_PADDING = 6.dp
private val TOUCH_TARGET = 48.dp
@Composable @Composable
private fun SearchField( private fun SearchField(
@@ -780,8 +781,12 @@ private fun TabButton(
modifier modifier
.onGloballyPositioned { tabLeft = it.boundsInParent().left } .onGloballyPositioned { tabLeft = it.boundsInParent().left }
.clickable(onClick = onClick) .clickable(onClick = onClick)
.minimumInteractiveComponentSize() .widthIn(min = TOUCH_TARGET)
.padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING), .height(TOUCH_TARGET),
contentAlignment = Alignment.CenterStart,
) {
Box(
modifier = Modifier.padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING),
) { ) {
if (clipStart != null && clipEnd != null) { if (clipStart != null && clipEnd != null) {
Box( Box(
@@ -814,6 +819,7 @@ private fun TabButton(
TabContent(tab, progress, MaterialTheme.colorScheme.onBackground) TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
} }
} }
}
} }
@Composable @Composable