Skip to content

Commit 2e37a4c

Browse files
fix: constrain NavigationRail width to prevent long text from breaking layout
Limit NavigationRail max width to 80dp and use TextOverflow.Ellipsis for labels, preventing long translations (e.g. Spanish, Vietnamese, Russian) from pushing the sidebar too wide on tablets.
1 parent bc6d3bb commit 2e37a4c

1 file changed

Lines changed: 68 additions & 35 deletions

File tree

app/src/main/java/me/bmax/apatch/ui/MainActivity.kt

Lines changed: 68 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ import androidx.compose.foundation.layout.width
138138
import androidx.compose.foundation.layout.fillMaxSize
139139
import androidx.compose.foundation.layout.fillMaxHeight
140140
import androidx.compose.foundation.layout.fillMaxWidth
141+
import androidx.compose.foundation.layout.widthIn
141142
import androidx.compose.foundation.background
142143
import androidx.compose.foundation.shape.CircleShape
143144
import androidx.compose.ui.graphics.Color
@@ -743,42 +744,72 @@ class MainActivity : AppCompatActivity() {
743744
)
744745

745746
Box(modifier = Modifier.fillMaxSize()) {
746-
CompositionLocalProvider(
747-
LocalSnackbarHost provides snackBarHostState,
748-
LocalScrollState provides if (isFloatingMode) ScrollState(
749-
isScrollingDown = isScrollingDown,
750-
scrollOffset = scrollOffset,
751-
previousScrollOffset = previousScrollOffset
752-
) else null,
753-
LocalBottomBarVisible provides bottomBarVisibleState,
754-
LocalIsFloatingNavMode provides isFloatingMode
755-
) {
756-
DestinationsNavHost(
757-
modifier = Modifier
758-
.fillMaxSize()
759-
.then(
760-
if (useNavigationRail) Modifier.padding(start = 80.dp) else Modifier
761-
)
762-
.navBarLiquefiable(
763-
if (shouldExposeContentToLiquid) floatingLiquidState else null
764-
)
765-
.then(
766-
when {
767-
isFloatingMode -> Modifier.nestedScroll(scrollConnection)
768-
!useNavigationRail -> Modifier.padding(bottom = 80.dp)
769-
else -> Modifier
770-
}
771-
),
772-
navGraph = NavGraphs.root,
773-
navController = navController,
774-
engine = rememberNavHostEngine(navHostContentAlignment = Alignment.TopCenter),
775-
defaultTransitions = navTransitions
747+
val contentModifier = Modifier
748+
.then(
749+
if (useNavigationRail) Modifier.weight(1f) else Modifier.fillMaxSize()
750+
)
751+
.navBarLiquefiable(
752+
if (shouldExposeContentToLiquid) floatingLiquidState else null
753+
)
754+
.then(
755+
when {
756+
isFloatingMode -> Modifier.nestedScroll(scrollConnection)
757+
!useNavigationRail -> Modifier.padding(bottom = 80.dp)
758+
else -> Modifier
759+
}
776760
)
777-
}
778761

779762
if (useNavigationRail) {
780-
Box(modifier = Modifier.align(Alignment.CenterStart)) {
763+
Row(modifier = Modifier.fillMaxSize()) {
781764
NavigationRailBar(navController)
765+
CompositionLocalProvider(
766+
LocalSnackbarHost provides snackBarHostState,
767+
LocalScrollState provides if (isFloatingMode) ScrollState(
768+
isScrollingDown = isScrollingDown,
769+
scrollOffset = scrollOffset,
770+
previousScrollOffset = previousScrollOffset
771+
) else null,
772+
LocalBottomBarVisible provides bottomBarVisibleState,
773+
LocalIsFloatingNavMode provides isFloatingMode
774+
) {
775+
DestinationsNavHost(
776+
modifier = contentModifier,
777+
navGraph = NavGraphs.root,
778+
navController = navController,
779+
engine = rememberNavHostEngine(navHostContentAlignment = Alignment.TopCenter),
780+
defaultTransitions = navTransitions
781+
)
782+
}
783+
}
784+
} else {
785+
CompositionLocalProvider(
786+
LocalSnackbarHost provides snackBarHostState,
787+
LocalScrollState provides if (isFloatingMode) ScrollState(
788+
isScrollingDown = isScrollingDown,
789+
scrollOffset = scrollOffset,
790+
previousScrollOffset = previousScrollOffset
791+
) else null,
792+
LocalBottomBarVisible provides bottomBarVisibleState,
793+
LocalIsFloatingNavMode provides isFloatingMode
794+
) {
795+
DestinationsNavHost(
796+
modifier = Modifier
797+
.fillMaxSize()
798+
.navBarLiquefiable(
799+
if (shouldExposeContentToLiquid) floatingLiquidState else null
800+
)
801+
.then(
802+
when {
803+
isFloatingMode -> Modifier.nestedScroll(scrollConnection)
804+
!useNavigationRail -> Modifier.padding(bottom = 80.dp)
805+
else -> Modifier
806+
}
807+
),
808+
navGraph = NavGraphs.root,
809+
navController = navController,
810+
engine = rememberNavHostEngine(navHostContentAlignment = Alignment.TopCenter),
811+
defaultTransitions = navTransitions
812+
)
782813
}
783814
}
784815

@@ -1417,7 +1448,9 @@ private fun NavigationRailBar(navController: NavHostController) {
14171448
}
14181449

14191450
NavigationRail(
1420-
modifier = Modifier.fillMaxHeight(),
1451+
modifier = Modifier
1452+
.fillMaxHeight()
1453+
.widthIn(max = 80.dp),
14211454
containerColor = if (BackgroundConfig.isCustomBackgroundEnabled) {
14221455
MaterialTheme.colorScheme.surface.copy(alpha = BackgroundConfig.customBackgroundOpacity)
14231456
} else {
@@ -1478,7 +1511,7 @@ private fun NavigationRailBar(navController: NavHostController) {
14781511
label = {
14791512
Text(
14801513
text = stringResource(destination.label),
1481-
overflow = TextOverflow.Visible,
1514+
overflow = TextOverflow.Ellipsis,
14821515
maxLines = 1,
14831516
softWrap = false
14841517
)
@@ -1487,7 +1520,7 @@ private fun NavigationRailBar(navController: NavHostController) {
14871520
)
14881521
}
14891522
}
1490-
1523+
14911524
Spacer(Modifier.weight(1f))
14921525
}
14931526
}

0 commit comments

Comments
 (0)