From 6286c1e0c9b2d8c51c5f1e5f38f22df1fc493378 Mon Sep 17 00:00:00 2001
From: Talon <talon@iamtalon.me>
Date: Tue, 2 Sep 2025 22:35:24 +0200
Subject: [PATCH] Try to fix styles

---
 frontend-vue/src/App.vue                      |  2 +-
 .../src/components/base/BaseButton.vue        |  6 +++++
 .../src/components/sidebar/Sidebar.vue        |  2 +-
 frontend-vue/src/style.css                    | 26 +++++++++++++------
 frontend-vue/src/views/AuthView.vue           |  2 +-
 frontend-vue/src/views/MainView.vue           |  6 +++--
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/frontend-vue/src/App.vue b/frontend-vue/src/App.vue
index 5d9588d..8c9c445 100644
--- a/frontend-vue/src/App.vue
+++ b/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;
 }
diff --git a/frontend-vue/src/components/base/BaseButton.vue b/frontend-vue/src/components/base/BaseButton.vue
index 6b33b44..b8854b2 100644
--- a/frontend-vue/src/components/base/BaseButton.vue
+++ b/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) {
diff --git a/frontend-vue/src/components/sidebar/Sidebar.vue b/frontend-vue/src/components/sidebar/Sidebar.vue
index e4da9b5..c9e89c3 100644
--- a/frontend-vue/src/components/sidebar/Sidebar.vue
+++ b/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 {
diff --git a/frontend-vue/src/style.css b/frontend-vue/src/style.css
index 99b1f2f..5038834 100644
--- a/frontend-vue/src/style.css
+++ b/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 */
-input, textarea, [contenteditable="true"], .allow-select {
+/* Ensure text selection works in content and form areas */
+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;
diff --git a/frontend-vue/src/views/AuthView.vue b/frontend-vue/src/views/AuthView.vue
index f4ad5e2..bfdb925 100644
--- a/frontend-vue/src/views/AuthView.vue
+++ b/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;
diff --git a/frontend-vue/src/views/MainView.vue b/frontend-vue/src/views/MainView.vue
index 2de029e..cc0ff2a 100644
--- a/frontend-vue/src/views/MainView.vue
+++ b/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 {