diff --git a/frontend-vue/index.html b/frontend-vue/index.html
index 28cf92b..96c1723 100644
--- a/frontend-vue/index.html
+++ b/frontend-vue/index.html
@@ -3,7 +3,7 @@
-
+
Notebrook
diff --git a/frontend-vue/src/components/base/BaseButton.vue b/frontend-vue/src/components/base/BaseButton.vue
index be3c6c3..6b33b44 100644
--- a/frontend-vue/src/components/base/BaseButton.vue
+++ b/frontend-vue/src/components/base/BaseButton.vue
@@ -65,6 +65,12 @@ const handleKeydown = (event: KeyboardEvent) => {
transition: all 0.2s ease;
outline: none;
text-decoration: none;
+ /* iOS-specific optimizations */
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
}
.base-button:focus-visible {
@@ -81,16 +87,22 @@ const handleKeydown = (event: KeyboardEvent) => {
.base-button--sm {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
+ min-height: 2.75rem; /* 44px minimum for iOS touch targets */
+ min-width: 2.75rem;
}
.base-button--md {
padding: 0.75rem 1rem;
font-size: 1rem;
+ min-height: 2.75rem;
+ min-width: 2.75rem;
}
.base-button--lg {
padding: 1rem 1.5rem;
font-size: 1.125rem;
+ min-height: 3rem;
+ min-width: 3rem;
}
/* Variants */
diff --git a/frontend-vue/src/components/base/BaseTextarea.vue b/frontend-vue/src/components/base/BaseTextarea.vue
index 1c0bcc7..f9cba95 100644
--- a/frontend-vue/src/components/base/BaseTextarea.vue
+++ b/frontend-vue/src/components/base/BaseTextarea.vue
@@ -157,6 +157,9 @@ defineExpose({
outline: none;
resize: vertical;
min-height: 3rem;
+ /* iOS-specific optimizations */
+ -webkit-appearance: none;
+ -webkit-border-radius: 8px;
}
.base-textarea__field:focus {
diff --git a/frontend-vue/src/components/chat/MessageInput.vue b/frontend-vue/src/components/chat/MessageInput.vue
index 6319294..dd1a150 100644
--- a/frontend-vue/src/components/chat/MessageInput.vue
+++ b/frontend-vue/src/components/chat/MessageInput.vue
@@ -76,6 +76,7 @@ defineExpose({
\ No newline at end of file
diff --git a/frontend-vue/src/style.css b/frontend-vue/src/style.css
index 399a4b2..99b1f2f 100644
--- a/frontend-vue/src/style.css
+++ b/frontend-vue/src/style.css
@@ -1,3 +1,17 @@
+/* CSS Custom Properties for iOS Safe Areas and Dynamic Viewport */
+:root {
+ --safe-area-inset-top: env(safe-area-inset-top, 0);
+ --safe-area-inset-right: env(safe-area-inset-right, 0);
+ --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
+ --safe-area-inset-left: env(safe-area-inset-left, 0);
+
+ /* Dynamic viewport height that accounts for iOS Safari UI changes */
+ --vh-actual: 100vh;
+ --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 */
+}
+
/* Minimal reset styles only */
* {
box-sizing: border-box;
@@ -7,7 +21,7 @@ body {
margin: 0;
padding: 0;
width: 100vw;
- height: 100vh;
+ height: var(--vh-dynamic, 100vh);
overflow: hidden;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -16,6 +30,9 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ /* iOS-specific optimizations */
+ -webkit-text-size-adjust: 100%;
+ -webkit-tap-highlight-color: transparent;
}
#app {
@@ -26,6 +43,25 @@ body {
overflow: hidden;
}
+/* iOS-specific touch and interaction optimizations */
+* {
+ /* Disable callouts and text selection on iOS for better touch interactions */
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+/* Allow text selection for content areas */
+input, textarea, [contenteditable="true"], .allow-select {
+ -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/MainView.vue b/frontend-vue/src/views/MainView.vue
index 1eda41f..2de029e 100644
--- a/frontend-vue/src/views/MainView.vue
+++ b/frontend-vue/src/views/MainView.vue
@@ -36,6 +36,7 @@
@select-channel="(id) => { selectChannel(id); sidebarOpen = false }"
@channel-info="handleChannelInfo"
@settings="showSettings = true"
+ @close="sidebarOpen = false"
/>
@@ -600,7 +601,7 @@ onMounted(async () => {