Fix bottom controls spacing

savageserif · Jul 8, 2024 · 5450c79 · 5450c79 · github-actions · Jul 8, 2024
1 parent bdc551d
commit 5450c79
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/PageColumnControls.vue b/src/components/PageColumnControls.vue
@@ -3,7 +3,9 @@
     class="flex flex-initial items-center bg-controls-color"
     :class="[
       view.isTouchDevice ? 'h-12' : 'h-10',
-      bottom && view.isTouchDevice ? 'h-[calc(3rem+env(safe-area-inset-bottom))] py-1' : '',
+      bottom && view.isStandaloneDisplayMode
+        ? 'h-auto pb-[calc(0.25rem+env(safe-area-inset-bottom))] pt-1'
+        : '',
     ]"
   >
     <div class="flex flex-1 items-center gap-1 px-1">

diff --git a/src/stores/ViewStore.ts b/src/stores/ViewStore.ts
@@ -33,11 +33,11 @@ export const useViewStore = defineStore('view', () => {
   });
 
   const isTouchDevice = useMediaQuery('(pointer: coarse)');
+  const isStandaloneDisplayMode = useMediaQuery('(display-mode: standalone)');
+  const { width: windowWidth } = useWindowSize();
 
   const prioritizedView = useStorage<'link' | 'comments'>('prioritizedView', 'link');
 
-  const { width: windowWidth } = useWindowSize();
-
   // number of columns available depending on window width
   const availableColumns = computed((): 1 | 2 | 3 => {
     if (windowWidth.value < 721) return 1;
@@ -84,8 +84,9 @@ export const useViewStore = defineStore('view', () => {
     colorScheme,
     darkColorSchemeIsActive,
     isTouchDevice,
-    prioritizedView,
+    isStandaloneDisplayMode,
     windowWidth,
+    prioritizedView,
     availableColumns,
     secondaryColumn,
     commentsColumn,