From 7009aa8ef59bd98f5e2c5bc9dacf904188b03f9a Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Fri, 25 Sep 2026 08:24:26 +0000
Subject: [PATCH] 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.
---
 .../com/subtracks/ui/library/LibraryScreen.kt | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt b/app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt
index cb2191e9..caa4f5ee 100644
--- a/app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt
+++ b/app/src/main/kotlin/com/subtracks/ui/library/LibraryScreen.kt
@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
@@ -52,7 +53,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldDefaults
-import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.material3.pulltorefresh.PullToRefreshBox
 import androidx.compose.material3.pulltorefresh.PullToRefreshDefaults
 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_ICON_SIZE = 24.dp
 private val TAB_VERTICAL_PADDING = 6.dp
+private val TOUCH_TARGET = 48.dp
 
 @Composable
 private fun SearchField(
@@ -780,38 +781,43 @@ private fun TabButton(
             modifier
                 .onGloballyPositioned { tabLeft = it.boundsInParent().left }
                 .clickable(onClick = onClick)
-                .minimumInteractiveComponentSize()
-                .padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING),
+                .widthIn(min = TOUCH_TARGET)
+                .height(TOUCH_TARGET),
+        contentAlignment = Alignment.CenterStart,
     ) {
-        if (clipStart != null && clipEnd != null) {
-            Box(
-                modifier =
-                    Modifier.drawWithContent {
-                        val hole =
-                            Path().apply {
-                                addRect(Rect(clipStart, 0f, clipEnd, size.height))
-                            }
-                        clipPath(hole, clipOp = ClipOp.Difference) {
-                            this@drawWithContent.drawContent()
-                        }
-                    },
-            ) {
-                TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
-            }
-            Box(
-                modifier =
-                    Modifier
-                        .clearAndSetSemantics {}
-                        .drawWithContent {
-                            clipRect(clipStart, 0f, clipEnd, size.height) {
+        Box(
+            modifier = Modifier.padding(start = 8.dp, end = 12.dp, top = TAB_VERTICAL_PADDING, bottom = TAB_VERTICAL_PADDING),
+        ) {
+            if (clipStart != null && clipEnd != null) {
+                Box(
+                    modifier =
+                        Modifier.drawWithContent {
+                            val hole =
+                                Path().apply {
+                                    addRect(Rect(clipStart, 0f, clipEnd, size.height))
+                                }
+                            clipPath(hole, clipOp = ClipOp.Difference) {
                                 this@drawWithContent.drawContent()
                             }
                         },
-            ) {
-                TabContent(tab, progress, selectedContent)
+                ) {
+                    TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
+                }
+                Box(
+                    modifier =
+                        Modifier
+                            .clearAndSetSemantics {}
+                            .drawWithContent {
+                                clipRect(clipStart, 0f, clipEnd, size.height) {
+                                    this@drawWithContent.drawContent()
+                                }
+                            },
+                ) {
+                    TabContent(tab, progress, selectedContent)
+                }
+            } else {
+                TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
             }
-        } else {
-            TabContent(tab, progress, MaterialTheme.colorScheme.onBackground)
         }
     }
 }