Fix dialogs padding and spacing

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt

@@ -149,7 +149,6 @@ fun ListItem(
 
 @Composable
 fun ChangeListItem(text: String) {
-    val smallPadding = Dimens.smallPadding
 
     ConstraintLayout {
         val (bullet, changeLog) = createRefs()
@@ -170,7 +169,7 @@ fun ChangeListItem(text: String) {
             modifier =
                 Modifier.absolutePadding(left = Dimens.mediumPadding).constrainAs(changeLog) {
                     top.linkTo(parent.top)
-                    bottom.linkTo(parent.bottom, margin = smallPadding)
+                    bottom.linkTo(parent.bottom)
                     start.linkTo(parent.start)
                     end.linkTo(parent.end)
                 }

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ChangelogDialog.kt

@@ -1,9 +1,9 @@
 package net.mullvad.mullvadvpn.compose.dialog
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
@@ -23,6 +23,7 @@ import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.DialogProperties
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ChangeListItem
+import net.mullvad.mullvadvpn.lib.theme.Dimens
 
 @Composable
 fun ChangelogDialog(changesList: List<String>, version: String, onDismiss: () -> Unit) {
@@ -39,13 +40,15 @@ fun ChangelogDialog(changesList: List<String>, version: String, onDismiss: () ->
             )
         },
         text = {
-            Column {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.spacedBy(Dimens.smallPadding)
+            ) {
                 Text(
                     text = stringResource(R.string.changes_dialog_subtitle),
                     fontSize = 18.sp,
                     color = Color.White,
-                    modifier =
-                        Modifier.padding(vertical = dimensionResource(id = R.dimen.medium_padding))
+                    modifier = Modifier.fillMaxWidth()
                 )
 
                 changesList.forEach { changeItem -> ChangeListItem(text = changeItem) }
@@ -55,7 +58,6 @@ fun ChangelogDialog(changesList: List<String>, version: String, onDismiss: () ->
             Button(
                 modifier =
                     Modifier.wrapContentHeight()
-                        .padding(all = dimensionResource(id = R.dimen.medium_padding))
                         .defaultMinSize(minHeight = dimensionResource(id = R.dimen.button_height))
                         .fillMaxWidth(),
                 colors =

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomDnsInfoDialog.kt

@@ -2,8 +2,15 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 
+@Preview
+@Composable
+private fun PreviewCustomDnsInfoDialog() {
+    CustomDnsInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun CustomDnsInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceRemovalDialog.kt

@@ -23,6 +23,7 @@ import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
@@ -31,6 +32,16 @@ import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord
 import net.mullvad.mullvadvpn.model.Device
 
+@Preview
+@Composable
+private fun PreviewShowDeviceRemovalDialog() {
+    ShowDeviceRemovalDialog(
+        onDismiss = {},
+        onConfirm = {},
+        device = Device("test", "test", byteArrayOf(), "test")
+    )
+}
+
 @Composable
 fun ShowDeviceRemovalDialog(onDismiss: () -> Unit, onConfirm: () -> Unit, device: Device) {
     AlertDialog(

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt

@@ -14,13 +14,13 @@ import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.Dialog
@@ -33,9 +33,22 @@ import net.mullvad.mullvadvpn.lib.theme.MullvadRed
 import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
 import net.mullvad.mullvadvpn.lib.theme.MullvadWhite20
 import net.mullvad.mullvadvpn.lib.theme.MullvadWhite60
+import net.mullvad.mullvadvpn.viewmodel.CustomDnsItem
 import net.mullvad.mullvadvpn.viewmodel.StagedDns
 
-@OptIn(ExperimentalComposeUiApi::class)
+@Preview
+@Composable
+private fun PreviewDnsDialog() {
+    DnsDialog(
+        stagedDns = StagedDns.NewDns(CustomDnsItem.default(), StagedDns.ValidationResult.Success),
+        isAllowLanEnabled = true,
+        onIpAddressChanged = {},
+        onAttemptToSave = {},
+        onRemove = {},
+        onDismiss = {}
+    )
+}
+
 @Composable
 fun DnsDialog(
     stagedDns: StagedDns,

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/InfoDialog.kt

@@ -1,10 +1,9 @@
 package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
@@ -58,17 +57,17 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
         text = {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.padding(top = verticalSpacing)
             ) {
                 Text(
                     text = message,
                     color = colorResource(id = R.color.white),
                     fontSize = dimensionResource(id = R.dimen.text_small).value.sp,
                     fontStyle = FontStyle.Normal,
                     textAlign = TextAlign.Start,
-                    modifier = Modifier.padding(bottom = verticalSpacing).fillMaxWidth()
+                    modifier = Modifier.fillMaxWidth()
                 )
                 if (additionalInfo != null) {
+                    Spacer(modifier = Modifier.height(verticalSpacing))
                     HtmlText(
                         htmlFormattedString = additionalInfo,
                         textColor = colorResource(id = R.color.white).toArgb(),
@@ -80,11 +79,7 @@ fun InfoDialog(message: String, additionalInfo: String? = null, onDismiss: () ->
         },
         confirmButton = {
             Button(
-                modifier =
-                    Modifier.wrapContentHeight()
-                        .padding(all = dimensionResource(id = R.dimen.medium_padding))
-                        .defaultMinSize(minHeight = dimensionResource(id = R.dimen.button_height))
-                        .fillMaxWidth(),
+                modifier = Modifier.wrapContentHeight().fillMaxWidth(),
                 colors =
                     ButtonDefaults.buttonColors(
                         containerColor = colorResource(id = R.color.blue),

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/LocalNetworkSharingInfoDialog.kt

@@ -2,9 +2,16 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.textResource
 
+@Preview
+@Composable
+private fun PreviewLocalNetworkSharingInfoDialog() {
+    LocalNetworkSharingInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun LocalNetworkSharingInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MalwareInfoDialog.kt

@@ -2,8 +2,15 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 
+@Preview
+@Composable
+private fun PreviewMalwareInfoDialog() {
+    MalwareInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun MalwareInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(message = stringResource(id = R.string.malware_info), onDismiss = onDismiss)

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
@@ -33,6 +34,12 @@ import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.util.isValidMtu
 
+@Preview
+@Composable
+private fun PreviewMtuDialog() {
+    MtuDialog(mtuInitial = 1234, onSave = {}, onRestoreDefaultValue = {}, onDismiss = {})
+}
+
 @Composable
 fun MtuDialog(
     mtuInitial: Int?,

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/ObfuscationInfoDialog.kt

@@ -2,8 +2,15 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 
+@Preview
+@Composable
+private fun PreviewObfuscationInfoDialog() {
+    ObfuscationInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun ObfuscationInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(message = stringResource(id = R.string.obfuscation_info), onDismiss = onDismiss)

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/QuantumResistanceInfoDialog.kt

@@ -2,8 +2,15 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 
+@Preview
+@Composable
+private fun PreviewQuantumResistanceInfoDialog() {
+    QuantumResistanceInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun QuantumResistanceInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/UdpOverTcpPortInfoDialog.kt

@@ -2,8 +2,15 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 
+@Preview
+@Composable
+private fun PreviewUdpOverTcpPortInfoDialog() {
+    UdpOverTcpPortInfoDialog(onDismiss = {})
+}
+
 @Composable
 fun UdpOverTcpPortInfoDialog(onDismiss: () -> Unit) {
     InfoDialog(

android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/WireguardPortInfoDialog.kt

@@ -2,10 +2,17 @@ package net.mullvad.mullvadvpn.compose.dialog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.model.PortRange
 import net.mullvad.mullvadvpn.util.asString
 
+@Preview
+@Composable
+private fun PreviewWireguardPortInfoDialog() {
+    WireguardPortInfoDialog(portRanges = listOf(PortRange(1, 2)), onDismiss = {})
+}
+
 @Composable
 fun WireguardPortInfoDialog(portRanges: List<PortRange>, onDismiss: () -> Unit) {
     InfoDialog(