fix(settings): app list scroll on Safari

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

2 files changed, 48 insertions, 14 deletions

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 83fab93c63b..718277301e4 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -348,11 +348,12 @@ $toolbar-height: 44px + $toolbar-padding * 2;
 
 	&--list-view {
 		margin-bottom: 100px;
+		// For positioning link overlay on rows
+		position: relative;
 	}
 
 	&__list-container {
 		width: 100%;
-		white-space: normal;
 	}
 
 	&__store-container {
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 8b513167460..06bf162acf9 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -209,6 +209,7 @@ export default {
 
 <style scoped lang="scss">
 @use '../../../../../core/css/variables.scss' as variables;
+@use 'sass:math';
 
 .app-item {
 	position: relative;
@@ -218,6 +219,9 @@ export default {
 	}
 
 	&--list-view {
+		--app-item-padding: calc(var(--default-grid-baseline) * 2);
+		--app-item-height: calc(var(--default-clickable-area) + var(--app-item-padding) * 2);
+
 		&.app-item--selected {
 			background-color: var(--color-background-dark);
 		}
@@ -225,11 +229,12 @@ export default {
 		> * {
 			vertical-align: middle;
 			border-bottom: 1px solid var(--color-border);
-			padding: 6px;
+			padding: var(--app-item-padding);
+			height: var(--app-item-height);
 		}
 
 		.app-image {
-			width: 44px;
+			width: var(--default-clickable-area);
 			height: auto;
 			text-align: right;
 		}
@@ -244,9 +249,30 @@ export default {
 			display: inline-block;
 		}
 
+		.app-name {
+			padding: 0 var(--app-item-padding);
+		}
+
+		.app-name--link {
+			height: var(--app-item-height);
+			display: flex;
+			align-items: center;
+		}
+
+		// Note: because of Safari bug, we cannot position link overlay relative to the table row
+		// So we need to manually position it relative to the table container and cell
+		// See: https://bugs.webkit.org/show_bug.cgi?id=240961
+		.app-name--link::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			height: var(--app-item-height);
+		}
+
 		.app-actions {
 			display: flex;
-			gap: 8px;
+			gap: var(--app-item-padding);
 			flex-wrap: wrap;
 			justify-content: end;
 
@@ -261,7 +287,14 @@ export default {
 		@media only screen and (max-width: 900px) {
 			.app-version,
 			.app-level {
-				display: none !important;
+				display: none;
+			}
+		}
+
+		/* Hide actions on a small screen. Click on app opens fill-screen sidebar with the buttons */
+		@media only screen and (max-width: math.div(variables.$breakpoint-mobile, 2)) {
+			.app-actions {
+				display: none;
 			}
 		}
 	}
@@ -289,6 +322,15 @@ export default {
 			margin: 5px 0;
 		}
 
+		.app-name--link::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+
 		.app-actions {
 			margin: 10px 0;
 		}
@@ -350,15 +392,6 @@ export default {
 	}
 }
 
-.app-name--link::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 .app-version {
 	color: var(--color-text-maxcontrast);
 }