fix iphone padding

src/components/TopBar.vue

@@ -5,9 +5,15 @@ import { initialized } from '@/composables/useFirebase'
 
 const loading = inject<boolean>('loading')
 
-const props = defineProps<{
-  sideBarCollapsed: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    sideBarCollapsed: boolean
+    height?: number
+  }>(),
+  {
+    height: 52
+  }
+)
 
 const emit = defineEmits<{
   toggleSideBar: []
@@ -24,8 +30,14 @@ const handleSignIn = async (close: () => Promise<boolean>) => {
 }
 </script>
 <template>
-  <div class="z-[500] flex h-[50px] bg-primary" :class="searchActive && 'search-active'">
-    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+  <div
+    class="z-[500] flex items-end bg-primary"
+    :class="searchActive && 'search-active'"
+  >
+    <div
+      class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"
+      :style="{ height: `${props.height}px` }"
+    >
       <div
         class="search-active-hide flex items-center pl-3"
         :class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"