From 5450c79b76545a0723a26ffd78d4129fcb0ccb21 Mon Sep 17 00:00:00 2001
From: Jona <8698248+jonamil@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:18:09 +0200
Subject: [PATCH] Fix bottom controls spacing

---
 src/components/PageColumnControls.vue | 4 +++-
 src/stores/ViewStore.ts               | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/PageColumnControls.vue b/src/components/PageColumnControls.vue
index 5c02f19..0c4b416 100644
--- 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
index 75d0636..cc4807a 100644
--- 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,