Improved responsiveness on mobile phone

frontend/src/App.vue

@@ -7,24 +7,29 @@
         <span class="brand-subtitle">Neurosurgeon Learning Platform</span>
       </div>
       <template v-if="authStore.isAuthenticated">
-        <ul class="navbar-links">
-          <li>
-            <RouterLink to="/" :class="{ active: $route.path === '/' }">
-              <span class="nav-icon">📚</span> Library
-            </RouterLink>
-          </li>
-          <li>
-            <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
-              <span class="nav-icon">🗂</span> Topics
-            </RouterLink>
-          </li>
-          <li>
-            <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
-              <span class="nav-icon">💬</span> Chat
-            </RouterLink>
-          </li>
-        </ul>
-        <button class="btn btn-logout" @click="logout">Sign out</button>
+        <button class="burger" :class="{ open: menuOpen }" @click="menuOpen = !menuOpen" aria-label="Menu">
+          <span></span><span></span><span></span>
+        </button>
+        <div class="nav-drawer" :class="{ open: menuOpen }" @click="menuOpen = false">
+          <ul class="navbar-links">
+            <li>
+              <RouterLink to="/" :class="{ active: $route.path === '/' }">
+                <span class="nav-icon">📚</span> Library
+              </RouterLink>
+            </li>
+            <li>
+              <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
+                <span class="nav-icon">🗂</span> Topics
+              </RouterLink>
+            </li>
+            <li>
+              <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
+                <span class="nav-icon">💬</span> Chat
+              </RouterLink>
+            </li>
+          </ul>
+          <button class="btn btn-logout" @click.stop="logout">Sign out</button>
+        </div>
       </template>
     </nav>
 
@@ -38,16 +43,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide } from 'vue'
-import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { ref, provide, watch } from 'vue'
+import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/authStore'
 
 const authStore = useAuthStore()
 const router = useRouter()
+const route = useRoute()
 
+const menuOpen = ref(false)
 const toastMessage = ref('')
 const toastType = ref<'toast-error' | 'toast-success'>('toast-error')
 
+// Close menu on navigation
+watch(() => route.path, () => { menuOpen.value = false })
+
 function logout() {
   authStore.clearCredentials()
   router.push({ name: 'login' })
@@ -94,6 +104,9 @@ body {
   justify-content: space-between;
   height: 64px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .navbar-brand {
@@ -118,6 +131,13 @@ body {
   margin-left: 0.25rem;
 }
 
+/* Desktop: links inline */
+.nav-drawer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .navbar-links {
   list-style: none;
   display: flex;
@@ -143,6 +163,33 @@ body {
   color: white;
 }
 
+/* Burger button — hidden on desktop */
+.burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.burger span {
+  display: block;
+  height: 2px;
+  background: #bee3f8;
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.burger.open span:nth-child(2) { opacity: 0; }
+.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
 .main-content {
   flex: 1;
   min-height: 0;
@@ -313,4 +360,63 @@ body {
   font-size: 0.9rem;
   margin-top: 0.5rem;
 }
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0 1rem;
+  }
+
+  .brand-subtitle {
+    display: none;
+  }
+
+  /* Show burger, hide desktop drawer */
+  .burger {
+    display: flex;
+  }
+
+  .nav-drawer {
+    display: none;
+    position: absolute;
+    top: 64px;
+    right: 0;
+    left: 0;
+    background: #1a365d;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.5rem 0 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 99;
+  }
+
+  .nav-drawer.open {
+    display: flex;
+  }
+
+  .navbar-links {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .navbar-links a {
+    padding: 0.85rem 1.5rem;
+    border-radius: 0;
+    font-size: 1rem;
+  }
+
+  .navbar-links a:hover,
+  .navbar-links a.active {
+    background: #2b6cb0;
+  }
+
+  .btn-logout {
+    margin: 0.5rem 1.5rem 0;
+    width: calc(100% - 3rem);
+    justify-content: center;
+  }
+
+  .main-content {
+    padding: 1rem;
+  }
+}
 </style>

frontend/src/env.ts

@@ -0,0 +1,8 @@
+/**
+ * Read a VITE_ env variable.
+ * At runtime in Docker, values come from window.__env__ (injected by docker-entrypoint.sh).
+ * At build time (dev / CI), values come from import.meta.env.
+ */
+export function env(key: string): string | undefined {
+  return (window as Record<string, any>).__env__?.[key] ?? (import.meta.env as Record<string, any>)[key]
+}

frontend/src/services/api.ts

@@ -1,8 +1,9 @@
 import axios from 'axios'
 import { useAuthStore } from '@/stores/authStore'
+import { env } from '@/env'
 
 export const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL ?? '/api/v1',
+  baseURL: env('VITE_API_URL') ?? '/api/v1',
   headers: {
     'Content-Type': 'application/json'
   }

frontend/src/views/BookReaderView.vue

@@ -322,4 +322,14 @@ async function resolveImages(html: string): Promise<string> {
   text-align: left;
 }
 .markdown-body :deep(th) { background: #f7fafc; font-weight: 600; }
+
+@media (max-width: 768px) {
+  .reader-view {
+    max-width: 100%;
+  }
+
+  .reader-content {
+    padding: 1rem;
+  }
+}
 </style>

frontend/src/views/ChatView.vue

@@ -485,4 +485,26 @@ async function handleSend() {
   font-size: 0.875rem;
   margin-bottom: 0.75rem;
 }
+
+@media (max-width: 768px) {
+  .chat-layout {
+    height: auto;
+    min-height: unset;
+  }
+
+  .chat-reader-split {
+    flex-direction: column;
+  }
+
+  .chat-column {
+    min-height: 60vh;
+  }
+
+  .reader-panel {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 1rem;
+    box-shadow: none;
+  }
+}
 </style>

frontend/src/views/LoginView.vue

@@ -168,4 +168,16 @@ async function handleSubmit() {
   font-size: 0.95rem;
   margin-top: 0.25rem;
 }
+
+@media (max-width: 768px) {
+  .login-wrapper {
+    align-items: flex-start;
+    padding-top: 2rem;
+    min-height: unset;
+  }
+
+  .login-card {
+    max-width: 100%;
+  }
+}
 </style>

frontend/src/views/UploadView.vue

@@ -99,9 +99,10 @@
 import { ref, onMounted, onUnmounted, inject } from 'vue'
 import { useBookStore } from '@/stores/bookStore'
 import BookCard from '@/components/BookCard.vue'
+import { env } from '@/env'
 
-const uploadEnabled = import.meta.env.VITE_UPLOAD_ENABLED !== 'false'
-const deleteEnabled = import.meta.env.VITE_DELETE_ENABLED !== 'false'
+const uploadEnabled = env('VITE_UPLOAD_ENABLED') !== 'false'
+const deleteEnabled = env('VITE_DELETE_ENABLED') !== 'false'
 
 const bookStore = useBookStore()
 const showToast = inject<(msg: string, type?: 'error' | 'success') => void>('showToast')