diff --git a/index.html b/index.html
index 657549d..3f4f696 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon-dark.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,user-scalable=no" />
     <title>Contexted</title>
   </head>
   <body>
diff --git a/src/App.vue b/src/App.vue
index 872c3ff..2ccbee7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,14 @@ const Mindmap = defineAsyncComponent(() => import('@/components/ViewModes/Mindma
 const firebaseAuthUI =
   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
 provide('firebaseAuthUI', firebaseAuthUI)
+
+// const setMinHeight = () => {
+//   const app = document.querySelector('#app')
+//   app?.setAttribute('style', `min-height: ${window.innerHeight}px`)
+// }
+// const handleResize = useDebounceFn(() => setMinHeight(), 100, { maxWait: 100 })
+// window.addEventListener('resize', handleResize)
+// setMinHeight()
 </script>
 
 <template>
@@ -20,7 +28,7 @@ provide('firebaseAuthUI', firebaseAuthUI)
     :side-bar-collapsed="sideBarCollapsed"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
-  <div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
+  <div class="mx-auto flex w-full max-w-app flex-grow">
     <SideBar
       :view-modes="viewModes"
       :active-view-mode="activeViewMode"
diff --git a/src/components/Search/SearchBar.vue b/src/components/Search/SearchBar.vue
index d006e15..8669057 100644
--- a/src/components/Search/SearchBar.vue
+++ b/src/components/Search/SearchBar.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { notes, findNotes, setActiveNote } from '@/composables/useNotes'
 
+const emit = defineEmits<{
+  active: [active: boolean]
+}>()
+
 const active = ref(false)
 watch(active, () => {
   if (!active.value) {
     query.value = ''
     activeResult.value = undefined
   }
+  emit('active', active.value)
 })
 
 const query = ref('')
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 2f36e0f..b8d65d2 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -11,6 +11,8 @@ const emit = defineEmits<{
   toggleSideBar: []
 }>()
 
+const searchActive = ref(false)
+
 const signOut = async (close: () => Promise<boolean>) => {
   await firebaseSignOut()
   close()
@@ -20,9 +22,15 @@ const authUI: any = inject('firebaseAuthUI')
 const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
 </script>
 <template>
-  <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
+  <div
+    class="fixed left-0 right-0 top-0 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="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
+      <div
+        class="flex items-center pl-3 search-active-hide"
+        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
+      >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -35,16 +43,16 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
       </div>
       <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
         <template v-if="initialized">
-          <SearchBar />
+          <SearchBar @active="(active) => (searchActive = active)" />
           <button
-            class="btn-outline btn-sm btn py-1 text-white"
+            class="btn-outline btn-sm btn py-1 text-white search-active-hide"
             @click="addNote('Untitled new note', '', true)"
           >
             <i class="fas fa-plus-circle text-[1.1rem]" />
           </button>
           <Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
             <template #activator="{ open }">
-              <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
+              <button class="btn-outline btn-sm btn py-1 text-white search-active-hide" @click="open">Sign in</button>
             </template>
             <template #title>Sign in</template>
             <template #default="{ close }">
@@ -55,7 +63,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
             </template>
           </Modal>
           <template v-else-if="user">
-            <div class="dropdown-end dropdown">
+            <div class="dropdown-end dropdown search-active-hide">
               <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
                 <i class="fa-fw fa-solid fa-user-gear" />
               </label>
@@ -88,7 +96,7 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
     </div>
   </div>
 </template>
-<style lang="css">
+<style lang="scss">
 #logo {
   @apply cursor-pointer transition-all duration-200 hover:text-primary;
 }
@@ -98,4 +106,10 @@ const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
 .btn-outline {
   @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
 }
+
+.search-active {
+  .search-active-hide {
+    @apply max-sm:hidden;
+  }
+}
 </style>
diff --git a/src/style.scss b/src/style.scss
index 302f892..5a96d44 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -5,11 +5,14 @@
 @import '@fontsource/source-sans-pro/300';
 
 html {
-  height: 100%;
+  height: fill-available;
+  height: -webkit-fill-available;
 }
 
 body {
-  min-height: 100%;
+  min-height: 100vh;
+  min-height: fill-available;
+  min-height: -webkit-fill-available;
   font-family: 'Source Sans Pro', sans-serif;
   overflow-y: scroll;
   @apply flex flex-col bg-gray-100;
