#1989 center the "Trigger and actions" and "Constraint and more" tabs

Author: sds100

CHANGELOG.md

@@ -19,6 +19,7 @@
 - [#1983](https://github.com/keymapperorg/KeyMapper/issues/1983) Inputting a modifier key and another key as actions through Expert mode applies the correct key character map. 
 - [#1990](https://github.com/keymapperorg/KeyMapper/issues/1990) Passthrough the device id of the trigger to the key event action if one is not manually specified
 - [#1982](https://github.com/keymapperorg/KeyMapper/issues/1982) Text action does not need Key Mapper input method on Android 13+.
+- [#1989](https://github.com/keymapperorg/KeyMapper/issues/1989) center the "Trigger and actions" and "Constraint and more" tabs.
 - Bugs with expert mode auto starting time.
 
 ## [4.0.0 Beta 6](https://github.com/sds100/KeyMapper/releases/tag/v4.0.0-beta.06)

base/src/main/java/io/github/sds100/keymapper/base/keymaps/BaseConfigKeyMapScreen.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.displayCutoutPadding
@@ -32,7 +33,6 @@ import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.PrimaryScrollableTabRow
-import androidx.compose.material3.PrimaryTabRow
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
@@ -200,19 +200,24 @@ fun BaseConfigKeyMapScreen(
                         }
                     }
 
-                    if (this@BoxWithConstraints.maxWidth < 500.dp) {
+                    if (tabs.size == 2) {
+                        // If only two tabs are showing then center them
                         PrimaryScrollableTabRow(
+                            modifier = Modifier
+                                .align(Alignment.CenterHorizontally)
+                                .width(IntrinsicSize.Max),
+                            edgePadding = 0.dp,
                             selectedTabIndex = pagerState.targetPage,
                             divider = {},
-                            edgePadding = 16.dp,
                             contentColor = MaterialTheme.colorScheme.onSurface,
                         ) {
                             Tabs()
                         }
                     } else {
-                        PrimaryTabRow(
+                        PrimaryScrollableTabRow(
                             selectedTabIndex = pagerState.targetPage,
                             divider = {},
+                            edgePadding = 16.dp,
                             contentColor = MaterialTheme.colorScheme.onSurface,
                         ) {
                             Tabs()
@@ -226,9 +231,13 @@ fun BaseConfigKeyMapScreen(
                 ) { pageIndex ->
                     when (tabs[pageIndex]) {
                         ConfigKeyMapTab.TRIGGER -> triggerScreen()
+
                         ConfigKeyMapTab.ACTIONS -> actionsScreen()
+
                         ConfigKeyMapTab.CONSTRAINTS -> constraintsScreen()
+
                         ConfigKeyMapTab.OPTIONS -> optionsScreen()
+
                         ConfigKeyMapTab.TRIGGER_AND_ACTIONS -> {
                             if (isVerticalTwoScreen) {
                                 VerticalTwoScreens(