library: Fix dropdown popup padding when in landscape layout

Author: YuKongA

composeApp/src/commonMain/kotlin/component/TextComponent.kt

@@ -360,8 +360,7 @@ fun dialog2(showDialog: MutableState<Boolean>) {
                         title = "Dropdown",
                         items = dropdownOptions,
                         selectedIndex = dropdownSelectedOption.value,
-                        onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
-                        popupHorizontalPadding = 12.dp + 24.dp
+                        onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption }
                     )
                 }
                 Spacer(Modifier.height(12.dp))

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDialog.kt

@@ -28,6 +28,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
@@ -74,11 +75,12 @@ fun SuperDialog(
     defaultWindowInsetsPadding: Boolean = true,
     content: @Composable () -> Unit
 ) {
+    val density = LocalDensity.current
     val paddingModifier = remember(outsideMargin) { Modifier.padding(horizontal = outsideMargin.width).padding(bottom = outsideMargin.height) }
     val roundedCorner by rememberUpdatedState(getRoundedCorner())
     val bottomCornerRadius by remember { derivedStateOf { if (roundedCorner != 0.dp) roundedCorner - outsideMargin.width else 32.dp } }
     val getWindowSize by rememberUpdatedState(getWindowSize())
-    val contentAlignment by remember { derivedStateOf { if (getWindowSize.width > getWindowSize.height) Alignment.Center else Alignment.BottomCenter } }
+    val contentAlignment by remember { derivedStateOf { if (getWindowSize.width > getWindowSize.height || getWindowSize.width.dp / density.density > 440.dp) Alignment.Center else Alignment.BottomCenter } }
 
     if (!dialogStates.contains(show)) dialogStates.add(show)
     LaunchedEffect(show.value) {
@@ -104,10 +106,12 @@ fun SuperDialog(
         }
             .fillMaxSize()
             .pointerInput(Unit) {
-                detectTapGestures(onTap = {
-                    dismissDialog()
-                    onDismissRequest()
-                })
+                detectTapGestures(
+                    onTap = {
+                        dismissDialog()
+                        onDismissRequest()
+                    }
+                )
             }
             .then(paddingModifier)
     ) {

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt

@@ -95,7 +95,6 @@ fun SuperDropdown(
     items: List<String>,
     alwaysRight: Boolean = false,
     insideMargin: DpSize = DpSize(16.dp, 16.dp),
-    popupHorizontalPadding: Dp = 12.dp,
     defaultWindowInsetsPadding: Boolean = true,
     selectedIndex: Int,
     onSelectedIndexChange: (Int) -> Unit,
@@ -114,11 +113,13 @@ fun SuperDropdown(
     val textMeasurer = rememberTextMeasurer()
     val textStyle = remember { TextStyle(fontWeight = FontWeight.Medium, fontSize = 17.sp) }
     val textWidthDp = remember(items) { items.maxOfOrNull { with(density) { textMeasurer.measure(text = it, style = textStyle).size.width.toDp() } } }
-    var dropdownHeightPx by remember { mutableStateOf(0) }
+    val windowWeightPx by rememberUpdatedState(getWindowSize().width)
+    val windowHeightPx by rememberUpdatedState(getWindowSize().height)
     var dropdownOffsetPx by remember { mutableStateOf(0) }
+    var dropdownHeightPx by remember { mutableStateOf(0) }
     var componentHeightPx by remember { mutableStateOf(0) }
+    var componentWidthPx by remember { mutableStateOf(0) }
     var offsetPx by remember { mutableStateOf(0) }
-    val windowHeightPx by rememberUpdatedState(getWindowSize().height)
     val statusBarPx by rememberUpdatedState(
         with(density) { WindowInsets.statusBars.asPaddingValues().calculateTopPadding().toPx() }.roundToInt()
     )
@@ -146,6 +147,7 @@ fun SuperDropdown(
                 val positionInWindow = coordinates.positionInWindow()
                 dropdownOffsetPx = positionInWindow.y.toInt()
                 componentHeightPx = coordinates.size.height
+                componentWidthPx = coordinates.size.width
             },
         insideMargin = insideMargin,
         title = title,
@@ -204,7 +206,7 @@ fun SuperDropdown(
                 ) {
                     LazyColumn(
                         modifier = Modifier
-                            .padding(horizontal = popupHorizontalPadding)
+                            .padding(horizontal = (windowWeightPx.dp - componentWidthPx.dp) / 2 / density.density)
                             .onGloballyPositioned { layoutCoordinates ->
                                 dropdownHeightPx = layoutCoordinates.size.height
                                 offsetPx = calculateOffsetPx(
@@ -321,7 +323,7 @@ fun DropdownImpl(
  * @param windowHeightPx The height of the window.
  * @param dropdownOffsetPx The default offset of the dropdown.
  * @param dropdownHeightPx The height of the dropdown.
- * @param componentHeight The height of the click component.
+ * @param componentHeightPx The height of the component.
  * @param insideHeightPx The height of the component inside.
  * @param statusBarPx The height of the status bar padding.
  * @param navigationBarPx The height of the navigation bar padding.
@@ -332,16 +334,16 @@ fun calculateOffsetPx(
     windowHeightPx: Int,
     dropdownOffsetPx: Int,
     dropdownHeightPx: Int,
-    componentHeight: Int,
+    componentHeightPx: Int,
     insideHeightPx: Int,
     statusBarPx: Int,
     navigationBarPx: Int,
     captionBarPx: Int
 ): Int {
-    return if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeight / 2) {
+    return if (windowHeightPx - dropdownOffsetPx < dropdownHeightPx / 2 + captionBarPx + navigationBarPx + insideHeightPx + componentHeightPx / 2) {
         windowHeightPx - dropdownHeightPx - insideHeightPx - captionBarPx - navigationBarPx
     } else {
-        val offset = dropdownOffsetPx - dropdownHeightPx / 2 + componentHeight / 2
+        val offset = dropdownOffsetPx - dropdownHeightPx / 2 + componentHeightPx / 2
         if (offset > insideHeightPx + statusBarPx) offset else insideHeightPx + statusBarPx
     }
 }

miuix/src/desktopMain/kotlin/top/yukonga/miuix/kmp/utils/Utils.desktop.kt

@@ -19,7 +19,7 @@ object WindowProvider {
     fun getWindowSize(): WindowSize {
         return composeWindow?.let { window ->
             WindowSize(
-                width = window.bounds.width,
+                width = window.bounds.width - window.insets.left - window.insets.right,
                 height = window.bounds.height - window.insets.top
             )
         } ?: WindowSize(0, 0)