Fix scrollig in screens with columns as base component

13 files changed, 172 insertions, 11 deletions

diff --git a/android/lib/feature/account/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/account/impl/AccountScreen.kt b/android/lib/feature/account/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/account/impl/AccountScreen.kt
index 409ceeae1c..e95704b911 100644
--- a/android/lib/feature/account/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/account/impl/AccountScreen.kt
+++ b/android/lib/feature/account/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/account/impl/AccountScreen.kt
@@ -9,6 +9,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.DeleteForever
 import androidx.compose.material.icons.rounded.Info
@@ -57,12 +59,14 @@ import net.mullvad.mullvadvpn.lib.common.Lc
 import net.mullvad.mullvadvpn.lib.common.util.toExpiryDateString
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateCloseIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.designsystem.NegativeOutlinedButton
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryTextButton
 import net.mullvad.mullvadvpn.lib.ui.tag.MANAGE_DEVICES_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -154,10 +158,16 @@ fun AccountScreen(
         snackbarHostState = snackbarHostState,
         actions = { AccountDropdownMenu(navigateToDeleteAccount) },
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
             horizontalAlignment = Alignment.Start,
             modifier =
                 modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
                     .animateContentSize()
                     .padding(horizontal = Dimens.sideMargin)
                     .padding(bottom = Dimens.screenBottomMargin),
diff --git a/android/lib/feature/apiaccess/impl/src/main/java/net/mullvad/mullvadvpn/feature/apiaccess/impl/screen/detail/ApiAccessMethodDetailsScreen.kt b/android/lib/feature/apiaccess/impl/src/main/java/net/mullvad/mullvadvpn/feature/apiaccess/impl/screen/detail/ApiAccessMethodDetailsScreen.kt
index fb909dea76..67454872b5 100644
--- a/android/lib/feature/apiaccess/impl/src/main/java/net/mullvad/mullvadvpn/feature/apiaccess/impl/screen/detail/ApiAccessMethodDetailsScreen.kt
+++ b/android/lib/feature/apiaccess/impl/src/main/java/net/mullvad/mullvadvpn/feature/apiaccess/impl/screen/detail/ApiAccessMethodDetailsScreen.kt
@@ -7,6 +7,8 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Delete
 import androidx.compose.material.icons.rounded.MoreVert
@@ -50,6 +52,7 @@ import net.mullvad.mullvadvpn.lib.model.ApiAccessMethod
 import net.mullvad.mullvadvpn.lib.model.ApiAccessMethodId
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.NavigationListItem
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.SwitchListItem
 import net.mullvad.mullvadvpn.lib.ui.component.text.ListItemInfo
@@ -64,6 +67,7 @@ import net.mullvad.mullvadvpn.lib.ui.tag.API_ACCESS_USE_METHOD_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.tag.DELETE_DROPDOWN_MENU_ITEM_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.ui.theme.color.menuItemColors
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -206,7 +210,17 @@ fun ApiAccessMethodDetailsScreen(
             }
         },
     ) { modifier: Modifier ->
-        Column(modifier = modifier.padding(horizontal = Dimens.sideMarginNew)) {
+        val scrollState = rememberScrollState()
+        Column(
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .padding(horizontal = Dimens.sideMarginNew)
+        ) {
             when (state) {
                 is ApiAccessMethodDetailsUiState.Loading -> Loading()
                 is ApiAccessMethodDetailsUiState.Content ->
diff --git a/android/lib/feature/appinfo/impl/src/main/java/net/mullvad/mullvadvpn/feature/appinfo/impl/AppInfoScreen.kt b/android/lib/feature/appinfo/impl/src/main/java/net/mullvad/mullvadvpn/feature/appinfo/impl/AppInfoScreen.kt
index 9490bd6b87..9f9d7a9e83 100644
--- a/android/lib/feature/appinfo/impl/src/main/java/net/mullvad/mullvadvpn/feature/appinfo/impl/AppInfoScreen.kt
+++ b/android/lib/feature/appinfo/impl/src/main/java/net/mullvad/mullvadvpn/feature/appinfo/impl/AppInfoScreen.kt
@@ -4,6 +4,8 @@ import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
@@ -30,6 +32,7 @@ import net.mullvad.mullvadvpn.feature.appinfo.api.ChangelogNavKey
 import net.mullvad.mullvadvpn.lib.common.Lc
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.ExternalLinkListItem
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.NavigationListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
@@ -37,6 +40,7 @@ import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
 import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -100,9 +104,18 @@ fun AppInfo(
         },
         snackbarHostState = snackbarHostState,
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMarginNew),
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .animateContentSize()
+                    .padding(horizontal = Dimens.sideMarginNew),
         ) {
             when (state) {
                 is Lc.Loading -> Loading()
diff --git a/android/lib/feature/autoconnect/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/autoconnect/impl/AutoConnectAndLockdownModeScreen.kt b/android/lib/feature/autoconnect/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/autoconnect/impl/AutoConnectAndLockdownModeScreen.kt
index 481e2472a4..a1d0ac8c5b 100644
--- a/android/lib/feature/autoconnect/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/autoconnect/impl/AutoConnectAndLockdownModeScreen.kt
+++ b/android/lib/feature/autoconnect/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/autoconnect/impl/AutoConnectAndLockdownModeScreen.kt
@@ -20,7 +20,9 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowLeft
 import androidx.compose.material.icons.automirrored.rounded.KeyboardArrowRight
@@ -64,12 +66,14 @@ import net.mullvad.mullvadvpn.lib.common.util.appendHideNavOnPlayBuild
 import net.mullvad.mullvadvpn.lib.common.util.openVpnSettings
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
 import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaInvisible
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaVisible
 import org.koin.androidx.compose.koinViewModel
 
@@ -127,7 +131,17 @@ fun AutoConnectAndLockdownModeScreen(
             )
         },
         content = { modifier ->
-            Column(modifier = modifier, verticalArrangement = Arrangement.Center) {
+            val scrollState = rememberScrollState()
+            Column(
+                modifier =
+                    modifier
+                        .drawVerticalScrollbar(
+                            state = scrollState,
+                            color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                        )
+                        .verticalScroll(state = scrollState),
+                verticalArrangement = Arrangement.Center,
+            ) {
                 val pagerState = rememberPagerState(pageCount = { PAGES.entries.size })
                 val scope = rememberCoroutineScope()
                 ConstraintLayout(modifier = Modifier.fillMaxSize()) {
diff --git a/android/lib/feature/customlist/impl/src/main/java/net/mullvad/mullvadvpn/feature/customlist/impl/screen/editlist/EditCustomListScreen.kt b/android/lib/feature/customlist/impl/src/main/java/net/mullvad/mullvadvpn/feature/customlist/impl/screen/editlist/EditCustomListScreen.kt
index eb58ec3c54..624d140dd2 100644
--- a/android/lib/feature/customlist/impl/src/main/java/net/mullvad/mullvadvpn/feature/customlist/impl/screen/editlist/EditCustomListScreen.kt
+++ b/android/lib/feature/customlist/impl/src/main/java/net/mullvad/mullvadvpn/feature/customlist/impl/screen/editlist/EditCustomListScreen.kt
@@ -4,6 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Delete
 import androidx.compose.material.icons.rounded.MoreVert
@@ -39,6 +41,7 @@ import net.mullvad.mullvadvpn.lib.model.CustomListId
 import net.mullvad.mullvadvpn.lib.model.CustomListName
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.EditCustomListListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
@@ -47,6 +50,7 @@ import net.mullvad.mullvadvpn.lib.ui.tag.DELETE_DROPDOWN_MENU_ITEM_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.tag.TOP_BAR_DROPDOWN_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.ui.theme.color.menuItemColors
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -121,8 +125,16 @@ fun EditCustomListScreen(
             )
         },
     ) { modifier: Modifier ->
+        val scrollState = rememberScrollState()
         Column(
-            modifier = modifier.padding(horizontal = Dimens.sideMarginNew),
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .padding(horizontal = Dimens.sideMarginNew),
             verticalArrangement = Arrangement.spacedBy(Dimens.listItemDivider),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
diff --git a/android/lib/feature/daita/impl/src/main/java/net/mullvad/mullvadvpn/feature/daita/impl/DaitaScreen.kt b/android/lib/feature/daita/impl/src/main/java/net/mullvad/mullvadvpn/feature/daita/impl/DaitaScreen.kt
index 5b6d9b7658..43283417f7 100644
--- a/android/lib/feature/daita/impl/src/main/java/net/mullvad/mullvadvpn/feature/daita/impl/DaitaScreen.kt
+++ b/android/lib/feature/daita/impl/src/main/java/net/mullvad/mullvadvpn/feature/daita/impl/DaitaScreen.kt
@@ -16,7 +16,9 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.PagerState
 import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -43,6 +45,7 @@ import net.mullvad.mullvadvpn.lib.model.FeatureIndicator
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateCloseIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.SwitchListItem
 import net.mullvad.mullvadvpn.lib.ui.component.text.ScreenDescription
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
@@ -50,6 +53,7 @@ import net.mullvad.mullvadvpn.lib.ui.designsystem.Position
 import net.mullvad.mullvadvpn.lib.ui.tag.DAITA_SCREEN_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
 
@@ -123,7 +127,17 @@ fun DaitaScreen(
             }
         },
     ) { modifier ->
-        Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier) {
+        val scrollState = rememberScrollState()
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState),
+        ) {
             when (state) {
                 is Lc.Loading -> {
                     Loading()
diff --git a/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/DeleteAccountScreen.kt b/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/DeleteAccountScreen.kt
index f7c9c63040..67fcd4ee03 100644
--- a/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/DeleteAccountScreen.kt
+++ b/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/DeleteAccountScreen.kt
@@ -12,6 +12,8 @@ import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -33,10 +35,12 @@ import net.mullvad.mullvadvpn.lib.ui.component.CheckboxConfirmation
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.annotatedStringResource
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
 import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Preview("Loading|Supported|Unsupported")
@@ -63,9 +67,18 @@ fun DeleteAccount(navigateToConfirmAccountDeletion: () -> Unit, onBackClick: ()
         navigationIcon = { NavigateBackIconButton(onNavigateBack = onBackClick) },
         bottomBar = { DeleteAccountBottomBar(onClickContinue = navigateToConfirmAccountDeletion) },
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMarginNew),
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .animateContentSize()
+                    .padding(horizontal = Dimens.sideMarginNew),
         ) {
             DeleteAccountContent()
         }
diff --git a/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/deleteaccountconfirmation/DeleteAccountConfirmationScreen.kt b/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/deleteaccountconfirmation/DeleteAccountConfirmationScreen.kt
index 574e5fff42..80c19e6b70 100644
--- a/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/deleteaccountconfirmation/DeleteAccountConfirmationScreen.kt
+++ b/android/lib/feature/deleteaccount/impl/src/main/java/net/mullvad/mullvadvpn/feature/deleteaccount/impl/deleteaccountconfirmation/DeleteAccountConfirmationScreen.kt
@@ -11,11 +11,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.input.InputTransformation
 import androidx.compose.foundation.text.input.TextFieldLineLimits
 import androidx.compose.foundation.text.input.byValue
 import androidx.compose.foundation.text.input.rememberTextFieldState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Visibility
 import androidx.compose.material.icons.outlined.VisibilityOff
@@ -65,6 +67,7 @@ import net.mullvad.mullvadvpn.lib.model.DeleteAccountError
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.annotatedStringResource
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.textfield.mullvadDarkTextFieldColors
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorSmall
 import net.mullvad.mullvadvpn.lib.ui.designsystem.NegativeButton
@@ -72,6 +75,7 @@ import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
 import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.ui.theme.color.warning
 import org.koin.androidx.compose.koinViewModel
 
@@ -164,10 +168,19 @@ private fun DeleteAccountConfirmationContent(
     onClickDeleteAccount: () -> Unit,
     onClickCancel: () -> Unit,
 ) {
+    val scrollState = rememberScrollState()
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier =
-            modifier.animateContentSize().padding(horizontal = Dimens.sideMarginNew).imePadding(),
+            modifier
+                .drawVerticalScrollbar(
+                    state = scrollState,
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                )
+                .verticalScroll(state = scrollState)
+                .animateContentSize()
+                .padding(horizontal = Dimens.sideMarginNew)
+                .imePadding(),
     ) {
         Text(
             modifier = Modifier.fillMaxWidth(),
diff --git a/android/lib/feature/managedevices/impl/src/main/java/net/mullvad/mullvadvpn/feature/managedevices/impl/ManageDevicesScreen.kt b/android/lib/feature/managedevices/impl/src/main/java/net/mullvad/mullvadvpn/feature/managedevices/impl/ManageDevicesScreen.kt
index fa053d74f8..01d50a4d7e 100644
--- a/android/lib/feature/managedevices/impl/src/main/java/net/mullvad/mullvadvpn/feature/managedevices/impl/ManageDevicesScreen.kt
+++ b/android/lib/feature/managedevices/impl/src/main/java/net/mullvad/mullvadvpn/feature/managedevices/impl/ManageDevicesScreen.kt
@@ -6,6 +6,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarHostState
@@ -36,12 +38,14 @@ import net.mullvad.mullvadvpn.lib.model.Device
 import net.mullvad.mullvadvpn.lib.model.GetDeviceListError
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.DeviceListItem
 import net.mullvad.mullvadvpn.lib.ui.component.positionForIndex
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorMedium
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
 
@@ -130,7 +134,16 @@ private fun Content(
     state: ManageDevicesUiState,
     navigateToRemoveDeviceConfirmationDialog: (device: Device) -> Unit,
 ) {
-    Column(modifier.padding(horizontal = Dimens.sideMarginNew)) {
+    val scrollState = rememberScrollState()
+    Column(
+        modifier
+            .drawVerticalScrollbar(
+                state = scrollState,
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+            )
+            .verticalScroll(state = scrollState)
+            .padding(horizontal = Dimens.sideMarginNew)
+    ) {
         Text(
             text = stringResource(id = R.string.manage_devices_description),
             style = MaterialTheme.typography.labelLarge,
diff --git a/android/lib/feature/multihop/impl/src/main/java/net/mullvad/mullvadvpn/feature/multihop/impl/MultihopScreen.kt b/android/lib/feature/multihop/impl/src/main/java/net/mullvad/mullvadvpn/feature/multihop/impl/MultihopScreen.kt
index ed59afbf54..0861a65252 100644
--- a/android/lib/feature/multihop/impl/src/main/java/net/mullvad/mullvadvpn/feature/multihop/impl/MultihopScreen.kt
+++ b/android/lib/feature/multihop/impl/src/main/java/net/mullvad/mullvadvpn/feature/multihop/impl/MultihopScreen.kt
@@ -11,6 +11,9 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
@@ -30,6 +33,7 @@ import net.mullvad.mullvadvpn.lib.model.FeatureIndicator
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateCloseIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.SwitchListItem
 import net.mullvad.mullvadvpn.lib.ui.component.text.ScreenDescription
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
@@ -37,6 +41,7 @@ import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.tag.MULTIHOP_SCREEN_TEST_TAG
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
 
@@ -89,9 +94,17 @@ fun MultihopScreen(
             }
         },
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = modifier.padding(horizontal = Dimens.sideMarginNew),
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .padding(horizontal = Dimens.sideMarginNew),
         ) {
             when (state) {
                 is Lc.Loading -> Loading()
diff --git a/android/lib/feature/notification/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/notification/impl/NotificationSettingsScreen.kt b/android/lib/feature/notification/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/notification/impl/NotificationSettingsScreen.kt
index a5ae54f6b4..de26dbf064 100644
--- a/android/lib/feature/notification/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/notification/impl/NotificationSettingsScreen.kt
+++ b/android/lib/feature/notification/impl/src/main/kotlin/net/mullvad/mullvadvpn/feature/notification/impl/NotificationSettingsScreen.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.OpenInNew
 import androidx.compose.material3.Icon
@@ -29,11 +31,13 @@ import net.mullvad.mullvadvpn.lib.common.Lc
 import net.mullvad.mullvadvpn.lib.common.util.openAppInfoNotificationSettings
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.SwitchListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 
 @Preview("Loading|Normal")
@@ -111,9 +115,14 @@ fun NotificationSettingsScreen(
             }
         },
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = modifier.padding(horizontal = Dimens.sideMarginNew),
+            modifier = modifier.drawVerticalScrollbar(
+                state = scrollState,
+                color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+            )
+                .verticalScroll(state = scrollState).padding(horizontal = Dimens.sideMarginNew),
         ) {
             when (state) {
                 is Lc.Loading -> Loading()
diff --git a/android/lib/feature/problemreport/impl/src/main/java/net/mullvad/mullvadvpn/feature/problemreport/impl/ReportProblemScreen.kt b/android/lib/feature/problemreport/impl/src/main/java/net/mullvad/mullvadvpn/feature/problemreport/impl/ReportProblemScreen.kt
index e6a5d2f8d9..d104814185 100644
--- a/android/lib/feature/problemreport/impl/src/main/java/net/mullvad/mullvadvpn/feature/problemreport/impl/ReportProblemScreen.kt
+++ b/android/lib/feature/problemreport/impl/src/main/java/net/mullvad/mullvadvpn/feature/problemreport/impl/ReportProblemScreen.kt
@@ -14,7 +14,9 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ErrorOutline
 import androidx.compose.material3.Icon
@@ -59,6 +61,7 @@ import net.mullvad.mullvadvpn.lib.ui.component.CheckboxConfirmation
 import net.mullvad.mullvadvpn.lib.ui.component.ExpandChevron
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.textfield.mullvadDarkTextFieldColors
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadCircularProgressIndicatorLarge
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
@@ -67,6 +70,7 @@ import net.mullvad.mullvadvpn.lib.ui.resource.R
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.Alpha40
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.lib.ui.theme.color.positive
 import net.mullvad.mullvadvpn.lib.ui.theme.color.warning
 import org.koin.androidx.compose.koinViewModel
@@ -155,11 +159,17 @@ private fun ReportProblemScreen(
                 }
             }
         } else {
+            val scrollState = rememberScrollState()
             Column(
                 modifier =
                     Modifier
                         .imePadding() // imePadding needs to be applied before the parent modifier.
                         .then(modifier)
+                        .drawVerticalScrollbar(
+                            state = scrollState,
+                            color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                        )
+                        .verticalScroll(state = scrollState)
                         .padding(
                             start = Dimens.sideMargin,
                             end = Dimens.sideMargin,
diff --git a/android/lib/feature/serveripoverride/impl/src/main/java/net/mullvad/mullvadvpn/feature/serveripoverride/impl/ServerIpOverridesScreen.kt b/android/lib/feature/serveripoverride/impl/src/main/java/net/mullvad/mullvadvpn/feature/serveripoverride/impl/ServerIpOverridesScreen.kt
index 3caaa1aabf..6868df73fa 100644
--- a/android/lib/feature/serveripoverride/impl/src/main/java/net/mullvad/mullvadvpn/feature/serveripoverride/impl/ServerIpOverridesScreen.kt
+++ b/android/lib/feature/serveripoverride/impl/src/main/java/net/mullvad/mullvadvpn/feature/serveripoverride/impl/ServerIpOverridesScreen.kt
@@ -10,6 +10,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Delete
 import androidx.compose.material.icons.rounded.Info
@@ -59,6 +61,7 @@ import net.mullvad.mullvadvpn.lib.model.SettingsPatchError
 import net.mullvad.mullvadvpn.lib.ui.component.ScaffoldWithSmallTopBar
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateBackIconButton
 import net.mullvad.mullvadvpn.lib.ui.component.button.NavigateCloseIconButton
+import net.mullvad.mullvadvpn.lib.ui.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.ui.component.listitem.ServerIpOverridesListItem
 import net.mullvad.mullvadvpn.lib.ui.designsystem.MullvadSnackbar
 import net.mullvad.mullvadvpn.lib.ui.designsystem.PrimaryButton
@@ -70,6 +73,7 @@ import net.mullvad.mullvadvpn.lib.ui.tag.SERVER_IP_OVERRIDE_RESET_OVERRIDES_TEST
 import net.mullvad.mullvadvpn.lib.ui.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.ui.theme.Dimens
 import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.ui.theme.color.AlphaScrollbar
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
 
@@ -194,8 +198,17 @@ fun ServerIpOverridesScreen(
             )
         },
     ) { modifier ->
+        val scrollState = rememberScrollState()
         Column(
-            modifier = modifier.animateContentSize().padding(horizontal = Dimens.sideMarginNew)
+            modifier =
+                modifier
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onSurface.copy(alpha = AlphaScrollbar),
+                    )
+                    .verticalScroll(state = scrollState)
+                    .animateContentSize()
+                    .padding(horizontal = Dimens.sideMarginNew)
         ) {
             ServerIpOverridesListItem(active = state.contentOrNull()?.overridesActive)