fix(settings): app list scroll on Safari

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

diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 83fab93c63bd7cf4c4a3146661e541742a3f73a1..718277301e417ea0c7a044abd1826898cb0ae44f 100644 (file)
--- 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 8b5131674609ed0772cd0752b22d0bef10798644..06bf162acf995d7065950ac40de0ffd34932ee58 100644 (file)
--- 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);
 }