Try to fix styles

frontend-vue/src/App.vue

@@ -25,7 +25,7 @@ const toastStore = useToastStore()
 
 <style>
 #app {
-  height: 100vh;
+  height: var(--vh-dynamic, 100vh);
   width: 100vw;
   overflow: hidden;
 }

frontend-vue/src/components/base/BaseButton.vue

@@ -138,6 +138,12 @@ const handleKeydown = (event: KeyboardEvent) => {
 .base-button--ghost {
   background-color: transparent;
   color: #646cff;
+  /* Ensure ghost buttons always meet minimum touch targets */
+  min-height: 2.75rem;
+  min-width: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .base-button--ghost:hover:not(:disabled) {

frontend-vue/src/components/sidebar/Sidebar.vue

@@ -77,7 +77,7 @@ defineEmits<{
   border-right: 1px solid #e5e7eb;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: var(--vh-dynamic, 100vh);
 }
 
 .sidebar__header {

frontend-vue/src/style.css

@@ -7,9 +7,18 @@
   
   /* Dynamic viewport height that accounts for iOS Safari UI changes */
   --vh-actual: 100vh;
+  --vh-small: 100vh; /* Fallback for browsers without svh support */
+  --vh-large: 100vh; /* Fallback for browsers without lvh support */
+  --vh-dynamic: 100vh; /* Fallback for browsers without dvh support */
+  
+  /* Use newer viewport units where supported */
   --vh-small: 100svh; /* Small viewport height - excludes browser UI */
   --vh-large: 100lvh; /* Large viewport height - includes browser UI */
   --vh-dynamic: 100dvh; /* Dynamic viewport height - changes with browser UI */
+  
+  /* Header height calculations */
+  --header-base-height: 4rem; /* Base header height */
+  --header-total-height: calc(var(--header-base-height) + var(--safe-area-inset-top, 0px));
 }
 
 /* Minimal reset styles only */
@@ -45,23 +54,24 @@ body {
 
 /* iOS-specific touch and interaction optimizations */
 * {
-  /* Disable callouts and text selection on iOS for better touch interactions */
+  /* Disable callouts on iOS for better touch interactions */
   -webkit-touch-callout: none;
+  /* Enable momentum scrolling globally for iOS */
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Disable text selection only on UI elements, not form elements */
+button, [role="button"], .no-select {
   -webkit-user-select: none;
   user-select: none;
 }
 
-/* Allow text selection for content areas */
+/* Ensure text selection works in content and form areas */
-input, textarea, [contenteditable="true"], .allow-select {
+input, textarea, [contenteditable="true"], .allow-select, p, span, div:not([role]), article, section {
   -webkit-user-select: text;
   user-select: text;
 }
 
-/* Enable momentum scrolling globally for iOS */
-* {
-  -webkit-overflow-scrolling: touch;
-}
-
 /* Accessibility helpers */
 .sr-only {
   position: absolute;

frontend-vue/src/views/AuthView.vue

@@ -99,7 +99,7 @@ onMounted(() => {
 
 <style scoped>
 .auth-view {
-  height: 100vh;
+  height: var(--vh-dynamic, 100vh);
   display: flex;
   align-items: center;
   justify-content: center;

frontend-vue/src/views/MainView.vue

@@ -714,12 +714,14 @@ onMounted(async () => {
     left: 0;
     height: var(--vh-dynamic, 100vh);
     transform: translateX(-100%);
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, visibility 0.3s ease;
     z-index: 400; /* Lower than mobile header but higher than overlay */
+    visibility: hidden; /* Completely hide when closed */
   }
   
   .sidebar.sidebar-open {
     transform: translateX(0);
+    visibility: visible;
   }
   
   .sidebar-overlay {
@@ -729,7 +731,7 @@ onMounted(async () => {
   .main-content {
     flex: 1;
     overflow: hidden;
-    padding-top: calc(4rem + var(--safe-area-inset-top)); /* Account for fixed header height */
+    padding-top: var(--header-total-height); /* Account for fixed header height with safe area */
   }
   
   .chat-container {