From 61c73f394d8236298967e4508c102791953054c2 Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Mon, 27 Apr 2026 12:06:15 -0500
Subject: [PATCH] feat: improve mobile responsiveness across UI

Sidenav becomes a full-screen overlay on mobile with slide-in animation.
Dialog goes full-screen on small screens. Settings dialog gets a mobile
nav with hamburger menu. Touch targets and text sizes scaled up for
mobile. Slider gets visual checked/unchecked colors. Sidebar auto-closes
on mobile route navigation. Resize handle hidden on mobile.
---
 app/components/Dialog/QuickSwitcher.vue     |  9 +++-
 app/components/Dialog/Settings.vue          | 55 +++++++++++++++++----
 app/components/Dialog/index.vue             |  4 +-
 app/components/Settings/ProviderSidebar.vue | 16 +++---
 app/components/Sidenav/Header.vue           | 13 +++--
 app/components/Sidenav/HeaderAgent.vue      | 19 ++++---
 app/components/Sidenav/Item.vue             | 16 +++---
 app/components/Sidenav/NavAgent.vue         | 19 +++----
 app/components/Sidenav/NavHome.vue          | 20 ++++----
 app/components/Sidenav/index.vue            | 51 +++++++++++++------
 app/components/Slider.vue                   |  6 ++-
 app/components/ThemeSwitcher.vue            |  4 +-
 app/composables/useSidebar.ts               | 12 +++++
 13 files changed, 163 insertions(+), 81 deletions(-)

diff --git a/app/components/Dialog/QuickSwitcher.vue b/app/components/Dialog/QuickSwitcher.vue
index 050ba1b..f5bd9fb 100644
--- a/app/components/Dialog/QuickSwitcher.vue
+++ b/app/components/Dialog/QuickSwitcher.vue
@@ -116,14 +116,19 @@ onMounted(() => { inputRef.value?.focus(); });
 
 <template>
     <div
-        class="flex flex-col w-[100vw] max-w-4xl max-h-[60vh] bg-[var(--color-bg-elevated)] rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
+        class="flex flex-col w-[100vw] max-w-4xl md:max-h-[60vh] bg-[var(--color-bg-elevated)] md:rounded-xl shadow-2xl border border-[var(--color-border)] overflow-hidden">
         <!-- Search -->
-        <div class="p-4 border-b border-[var(--color-border)]">
+        <div class="flex p-4 w-full border-b border-[var(--color-border)]">
             <input ref="inputRef" v-model="query" type="text" role="combobox" aria-autocomplete="list"
                 aria-haspopup="listbox" :aria-expanded="flattenedResults.length > 0" :aria-controls="listboxId"
                 :aria-activedescendant="flattenedResults[selectedIndex]?.uiId" placeholder="Search agents and topics..."
                 class="placeholder:text-[var(--text-tertiary)] w-full bg-transparent border-none outline-none text-lg text-[var(--text-primary)]"
                 @keydown="handleKeyDown" />
+            <button
+                class="p-2 flex items-center justify-center md:hidden rounded hover:bg-[var(--color-hover)] text-[var(--text-secondary)] transition-colors"
+                @click="emit('close')">
+                <span class="block i-mynaui-x-solid"></span>
+            </button>
         </div>
 
         <div ref="navRef"
diff --git a/app/components/Dialog/Settings.vue b/app/components/Dialog/Settings.vue
index 035fb0f..6cfdec4 100644
--- a/app/components/Dialog/Settings.vue
+++ b/app/components/Dialog/Settings.vue
@@ -39,6 +39,21 @@ const props = defineProps<{
 
 const { close, setOptions } = useDialog();
 
+const mobileNavOpen = ref(false);
+
+onMounted(() => {
+    window.addEventListener('resize', () => {
+        if (window.innerWidth >= 768) {
+            mobileNavOpen.value = false;
+        }
+    })
+});
+
+const handleNavigate = (page: string, params?: string) => {
+    setOptions({ page: page as keyof typeof PAGES_CONFIG, params });
+    mobileNavOpen.value = false;
+};
+
 const runtimePage = computed(() => {
     // 1. Get the base config (e.g., 'providers' or 'general')
     const config = PAGES_CONFIG[props.page as keyof typeof PAGES_CONFIG] || PAGES_CONFIG.general;
@@ -70,13 +85,26 @@ const runtimePage = computed(() => {
 </script>
 
 <template>
-    <div class="p-2 flex h-[70vh] h-[70dvh] w-[85vw]">
-        <nav class="w-64 flex flex-col gap-1 mr-2 overflow-y-auto">
-            <!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
-            <component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar"
-                @navigate="(p: string, params?: string) => setOptions({ page: p, params })" :params="props.params" />
+    <div class="p-2 flex flex-col md:flex-row h-screen md:h-[70vh] md:h-[70dvh] w-screen md:w-[85vw]">
+        <nav :class="[
+            'w-full md:w-64 flex-col gap-1 mr-2 overflow-y-auto text-xl md:text-base',
+            // Mobile: hidden by default, shown as fixed overlay
+            'hidden md:flex',
+            mobileNavOpen ? '!flex fixed inset-y-0 left-0 z-15 bg-[var(--bg-base)] p-2 shadow-xl' : ''
+        ]">
+            <!-- Mobile close button -->
+            <button
+                class="md:hidden flex items-center justify-center h-9 w-full rounded-lg @hover:bg-[var(--color-hover)] text-[var(--text-secondary)]"
+                @click="mobileNavOpen = false">
+                <span class="i-mynaui-x-solid mr-2"></span>
+                Close
+            </button>
 
-            <button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="setOptions({ page: id })"
+            <!-- If the page has a custom sidebar (for nested lists), show it; otherwise show default nav -->
+            <component v-if="runtimePage?.sidebar" :is="runtimePage.sidebar" @navigate="handleNavigate"
+                :params="props.params" />
+
+            <button v-else v-for="(config, id) in PAGES_CONFIG" :key="id" @click="handleNavigate(id)"
                 :class="[page === id ? 'bg-[var(--color-hover)]' : '@hover:bg-[var(--color-hover)]', 'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9']">
                 <div class="flex items-center gap-2 max-w-full flex-1">
                     <span :class="['w-5 h-5 text-5', config.icon]"></span>
@@ -87,17 +115,24 @@ const runtimePage = computed(() => {
 
         <!-- DYNAMIC CONTENT -->
         <main
-            class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-lg border-[var(--color-border)]">
+            class="flex-1 flex flex-col overflow-y-hidden max-h-full h-full px-3 bg-[var(--bg-surface)] border rounded-none md:rounded-lg border-[var(--color-border)]">
             <header class="flex items-center justify-between pl-2 pb-2 pt-2 ">
-                <h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2>
+                <div class="flex items-center gap-2">
+                    <!-- Mobile menu button -->
+                    <button
+                        class="md:hidden flex items-center justify-center h-8 w-8 rounded-lg @hover:bg-[var(--color-hover)]"
+                        @click="mobileNavOpen = true">
+                        <span class="i-mynaui-menu text-5"></span>
+                    </button>
+                    <h2 class="text-lg font-semibold m-0 case-capital">{{ runtimePage.label }}</h2>
+                </div>
                 <button
                     class="@hover:bg-[var(--color-hover)] p-1.5 rounded-md transition-colors duration-200 ease-[cubic-bezier(0,0.55,0.45,1)]"
                     @click="close">
                     <span class="i-mynaui-x-solid"></span>
                 </button>
             </header>
-            <component @navigate="(p: string, params?: string) => setOptions({ page: p, params })"
-                :is="runtimePage.component" :params="props.params" />
+            <component @navigate="handleNavigate" :is="runtimePage.component" :params="props.params" />
         </main>
     </div>
 </template>
diff --git a/app/components/Dialog/index.vue b/app/components/Dialog/index.vue
index 25b6218..537056e 100644
--- a/app/components/Dialog/index.vue
+++ b/app/components/Dialog/index.vue
@@ -53,9 +53,9 @@ onUnmounted(() => {
     <Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
         enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
         enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
-        <div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
+        <div v-if="open" class="z-50 fixed inset-0 md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 flex items-center justify-center">
             <div
-                class="absolute max-w-6xl bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
+                class="absolute w-full h-full md:w-auto md:h-auto max-w-6xl bg-[var(--bg-base)] rounded-none md:rounded-2xl shadow-2xl border border-[var(--color-border)] flex">
                 <KeepAlive>
                     <Settings v-if="page === DialogType.Settings" :page="data.page" :params="data.params" />
 
diff --git a/app/components/Settings/ProviderSidebar.vue b/app/components/Settings/ProviderSidebar.vue
index ef72a7a..50911cd 100644
--- a/app/components/Settings/ProviderSidebar.vue
+++ b/app/components/Settings/ProviderSidebar.vue
@@ -12,34 +12,34 @@ defineEmits(['navigate']);
 <template>
     <div class="flex flex-col gap-1 overflow-auto">
         <button @click="$emit('navigate', 'general')"
-            class="flex items-center gap-2 p-2 rounded-lg text-sm @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-            <span class="i-mynaui-chevron-left text-4"></span> Back to General
+            class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+            <span class="i-mynaui-chevron-left md:text-4"></span> Back to General
         </button>
 
         <button @click="$emit('navigate', 'providers')"
-            class="flex items-center gap-2 p-2 rounded-lg text-sm @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-            <span class="i-mynaui-envelope-open text-4"></span> All
+            class="flex items-center gap-2 p-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+            <span class="i-mynaui-envelope-open md:text-4"></span> All
         </button>
 
-        <div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Enabled Providers</div>
+        <div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Enabled Providers</div>
 
         <button v-for="p in providers?.filter(p => p.enabled)" :key="p.id" @click="$emit('navigate', 'providers', p.id)"
             :class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
             <div class="flex items-center gap-2">
                 <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
-                    class="w-4 h-4 text-[var(--text-primary)]" />
+                    class="h-6 w-6 md:w-4 md:h-4 text-[var(--text-primary)]" />
                 <span>{{ p.name }}</span>
             </div>
         </button>
 
-        <div class="px-2 py-4 font-bold text-xs uppercase opacity-50">Disabled Providers</div>
+        <div class="px-2 py-4 font-bold md:text-xs text-sm uppercase opacity-50">Disabled Providers</div>
 
         <button v-for="p in providers?.filter(p => !p.enabled)" :key="p.id"
             @click="$emit('navigate', 'providers', p.id)"
             :class="['case-capital flex items-center justify-between p-2 @hover:bg-[var(--color-hover)] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] rounded-lg', p.id === params ? 'bg-[var(--color-hover)]' : '']">
             <div class="flex items-center gap-2">
                 <component v-if="providerIcons[p.type]" :color="true" :is="providerIcons[p.type]"
-                    class="w-4 h-4 text-[var(--text-primary)]" />
+                    class="h-6 w-6 md:w-4 md:h-4 h-full text-[var(--text-primary)]" />
                 <span>{{ p.name }}</span>
             </div>
         </button>
diff --git a/app/components/Sidenav/Header.vue b/app/components/Sidenav/Header.vue
index dceb9dc..1ebf124 100644
--- a/app/components/Sidenav/Header.vue
+++ b/app/components/Sidenav/Header.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DialogType } from '~/composables/useDialog';
+
 const { user, signOut } = useAuth();
 
 // to prevent the user details from going blank for a 
@@ -30,18 +32,19 @@ const handleLogout = async () => {
         <button @click="dropdownOpen = !dropdownOpen"
             class="flex gap-1 pr-1 items-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
             <div
-                :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
+                :class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
                 <img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
-                <span v-else class="i-mynaui-user text-4 text-[var(--text-secondary)]"></span>
+                <span v-else class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-user text-[var(--text-secondary)]"></span>
             </div>
             <span
-                class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
+                class="md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
                 {{ cachedUser?.name }}
             </span>
-            <div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
+            <div :class="['transform-origin-left-center flex-shrink-0 w-5 h-5 md:w-4 md:h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
                 isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
             ]">
-                <span class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-250 ease-in-out"
+                <span
+                    class="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-250 ease-in-out"
                     :class="dropdownOpen ? 'rotate-180' : ''"></span>
             </div>
         </button>
diff --git a/app/components/Sidenav/HeaderAgent.vue b/app/components/Sidenav/HeaderAgent.vue
index a9699f4..37b506d 100644
--- a/app/components/Sidenav/HeaderAgent.vue
+++ b/app/components/Sidenav/HeaderAgent.vue
@@ -10,11 +10,13 @@ const { isHovered } = useSidenavContext();
 
 <template>
     <header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
-        <div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
-            :class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
+        <div :class="[
+            'w-10 flex flex-shrink-0 opacity-100 scale-100 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
+            isHovered ? 'md:w-8' : 'md:w-0 md:opacity-0 md:scale-95',
+        ]">
             <NuxtLink to="/"
                 class="flex @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg decoration-none transition-inherit text-[var(--text-secondary)] p-1.5">
-                <span class="i-mynaui-chevron-left text-4.5"></span>
+                <span class="i-mynaui-chevron-left text-5.5 md:text-4.5"></span>
             </NuxtLink>
         </div>
 
@@ -24,18 +26,19 @@ const { isHovered } = useSidenavContext();
                     class="shrink-1 max-w-full min-w-0 transition duration-200 pr-2 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
                     <div class="pointer-events-none flex items-center gap-1.5 max-w-full">
                         <div
-                            :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
+                            :class="['w-9 h-9 md:w-7 md:h-7 flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
                             <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
                                 class="w-full h-full object-cover" />
-                            <span v-else class="h-4 w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
+                            <span v-else
+                                class="w-5.5 h-5.5 md:h-4 md:w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
                         </div>
                         <span
-                            class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
+                            class="min-w-0 md:text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
                             {{ activeAgent?.name }}
                         </span>
-                        <div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]">
+                        <div class="shrink-0 w-5 h-5 md:w-4 md:h-4 text-[var(--text-secondary)]">
                             <span
-                                class="i-mynaui-chevron-up-down inline-block text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
+                                class="i-mynaui-chevron-up-down inline-block text-5 md:text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
                         </div>
                     </div>
                 </button>
diff --git a/app/components/Sidenav/Item.vue b/app/components/Sidenav/Item.vue
index c0fe151..a8286f8 100644
--- a/app/components/Sidenav/Item.vue
+++ b/app/components/Sidenav/Item.vue
@@ -16,12 +16,12 @@ const props = defineProps<{
             : '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
     ]">
         <div class="flex items-center gap-2 max-w-full flex-1">
-            <div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
-                <span class="text-4.5" :class="props.icon"></span>
+            <div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
+                <span class="text-5.5 md:text-4.5" :class="props.icon"></span>
             </div>
             <div class="flex justify-between items-center w-full">
-                <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
-                }}</span>
+                <span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
+                    }}</span>
                 <slot />
             </div>
         </div>
@@ -34,12 +34,12 @@ const props = defineProps<{
             : '@hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]'
     ]">
         <div class="flex items-center gap-2 max-w-full flex-1">
-            <div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
-                <span class="text-4.5" :class="props.icon"></span>
+            <div v-if="props.icon" class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
+                <span class="text-5.5 md:text-4.5" :class="props.icon"></span>
             </div>
             <div class="flex justify-between items-center w-full">
-                <span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
-                    }}</span>
+                <span class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
+                }}</span>
                 <slot />
             </div>
         </div>
diff --git a/app/components/Sidenav/NavAgent.vue b/app/components/Sidenav/NavAgent.vue
index 901d823..520dcdf 100644
--- a/app/components/Sidenav/NavAgent.vue
+++ b/app/components/Sidenav/NavAgent.vue
@@ -154,9 +154,9 @@ onMounted(() => {
         <!-- Topics Section -->
         <button @click="topicsOpen = !topicsOpen"
             class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
-            <span class="text-sm font-medium">Topics</span>
+            <span class="md:text-sm font-medium">Topics</span>
             <span
-                class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                class="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
                 :class="topicsOpen ? '' : '-rotate-90'"></span>
         </button>
 
@@ -167,22 +167,23 @@ onMounted(() => {
                     <template v-slot="{ item: topic }">
                         <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
                             :href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.name"
-                            class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]"
+                            class="group mt-1 px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]"
                             :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
                             <input v-if="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
                                 v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
                                 @blur="saveRename"
-                                class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
+                                class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
                             <div v-else-if="topic.renaming" class="flex w-full">
-                                <span class="i-svg-spinners-3-dots-fade text-6"></span>
+                                <span class="i-svg-spinners-3-dots-fade text-7 md:text-6"></span>
                             </div>
-                            <span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                            <span v-else class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                 {{ topic.name }}
                             </span>
 
                             <div data-action="toggle-dropdown"
-                                class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                                <span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
+                                class="text-[var(--text-secondary)] shrink-0 w-0 max-w-0 opacity-0 overflow-hidden p-1 max-md:w-auto max-md:max-w-none max-md:opacity-100 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)]"
+                                :class="route.params.topicId === topic.id ? 'w-auto max-w-none opacity-100' : 'group-hover:w-auto group-hover:max-w-none group-hover:opacity-100'">
+                                <span class="pointer-events-none h-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
                             </div>
                         </a>
                     </template>
@@ -202,7 +203,7 @@ onMounted(() => {
                     visibility: middlewareData.hide?.referenceHidden
                         ? 'hidden'
                         : 'visible',
-                }" class="fixed z-15" :class="transformOrigin">
+                }" class="fixed z-20" :class="transformOrigin">
                     <div v-click-outside="closeDropdown"
                         class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
 
diff --git a/app/components/Sidenav/NavHome.vue b/app/components/Sidenav/NavHome.vue
index 6da33be..3d02f09 100644
--- a/app/components/Sidenav/NavHome.vue
+++ b/app/components/Sidenav/NavHome.vue
@@ -121,9 +121,9 @@ onMounted(() => {
         <button
             class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors w-full"
             @click="toggleAgentsList">
-            <span class="text-sm">Agents</span>
+            <span class="md:text-sm">Agents</span>
             <span
-                class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                class="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
                 :class="{ '-rotate-90': !agentsOpen }"></span>
         </button>
 
@@ -131,10 +131,10 @@ onMounted(() => {
         <Collapsible :is-open="agentsOpen">
             <div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
                 <button @click="newAgent" :disabled="creatingAgent"
-                    class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
-                    <div class="h-7 w-7 flex items-center justify-center">
-                        <span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-4.5"></span>
-                        <span v-else class="i-mynaui-plus text-4.5"></span>
+                    class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg md:text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
+                    <div class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
+                        <span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-5 md:text-4"></span>
+                        <span v-else class="i-mynaui-plus text-5 md:text-4"></span>
                     </div>
                     <span>New Agent</span>
                 </button>
@@ -149,15 +149,15 @@ onMounted(() => {
                                 <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
                                     @keydown.prevent.enter="saveRename" @keydown.escape="cancelRename"
                                     @blur="saveRename"
-                                    class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
+                                    class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
                                 <span v-else
-                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                                    class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                     {{ agent.name }}
                                 </span>
 
                                 <div data-action="toggle-dropdown"
-                                    class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                                    <span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
+                                    class="text-[var(--text-secondary)] shrink-0 md:opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-[opacity,background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                                    <span class="pointer-events-none h-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
                                 </div>
                             </a>
                         </template>
diff --git a/app/components/Sidenav/index.vue b/app/components/Sidenav/index.vue
index 95ab9b0..eba88bb 100644
--- a/app/components/Sidenav/index.vue
+++ b/app/components/Sidenav/index.vue
@@ -103,39 +103,49 @@ const navKind = computed(() => {
 <template>
     <div class="relative">
         <aside ref="sidenavRef" :class="[
-            'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
-            open ? 'w-full mr-2' : 'w-0 mr-0',
-            isResizing ? 'transition-none' : ''
+            'mobile-full-width pr-2 md:pr-0 bg-[var(--bg-base)] h-full background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin,transform] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
+            open ? 'w-full' : 'w-0',
+            isResizing ? 'transition-none' : '',
+            // Mobile styles
+            'md:static md:z-auto',
+            open ? 'md:translate-x-0' : 'md:translate-x-0',
+            // Mobile overlay styles
+            'fixed inset-0 z-15 h-screen md:h-full',
+            open ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+            'md:max-w-xs',
         ]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
             @mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
-            <div :style="{ minWidth: `${sidebarWidth}px` }" class="pl-2 flex flex-col h-full justify-between">
+            <div :style="{ width: `${sidebarWidth}px` }"
+                class="mobile-full-width pl-2 flex flex-col h-full justify-between">
                 <div class="flex flex-col h-full max-h-full overflow-y-hidden">
                     <!-- Header -->
                     <div
-                        class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-11 pt-2">
+                        class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-13 md:h-11 pt-2">
 
                         <SidenavHeader v-if="navKind === 'home'" />
                         <SidenavHeaderAgent v-else-if="navKind === 'agent'" />
 
                         <div class="flex items-center justify-end text-[var(--text-secondary)] gap-0.5">
-                            <div :style="isHovering ? 'width: 32px;' : 'width: 0px;'"
-                                :class="['flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right']">
+                            <div :class="[
+                                'w-10 flex-shrink-0 overflow-hidden rounded-lg transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transform-origin-center-right md:flex',
+                                isHovering ? 'md:w-8' : 'md:w-0',
+                            ]">
                                 <Tooltip :hotkey="['ctrl', '[']">
                                     <button aria-label="close sidebar" @click="closeSidebar" :class="[
-                                        'flex text-5 h-8 w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
+                                        'flex h-10 w-10 md:h-8 md:w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent transition-inherit',
                                     ]">
                                         <span
-                                            class="i-mynaui-panel-left-close text-5 transition-inherit transform-origin-right-center"
-                                            :class="isHovering ? 'opacity-100 scale-100' : 'opacity-0 scale-95'"></span>
+                                            class="i-mynaui-panel-left-close opacity-100 scale-100 text-6 md:text-5 transition-all transform-origin-right-center"
+                                            :class="isHovering ? '' : 'md:opacity-0 md:scale-95'"></span>
                                     </button>
                                 </Tooltip>
                             </div>
                             <div v-if="navKind === 'agent'" class="flex-shrink-0 overflow-hidden rounded-lg">
                                 <Tooltip :hotkey="['ctrl', 'alt', 'n']">
                                     <NuxtLink aria-label="Start a new topic" :to="`/agent/${route.params.id}`" :class="[
-                                        'flex text-5 h-8 w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
+                                        'flex h-10 w-10 md:h-8 md:w-8 items-center justify-center @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] bg-transparent text-inherit',
                                     ]">
-                                        <span class="i-mynaui-book-plus text-5"></span>
+                                        <span class="i-mynaui-book-plus text-6 md:text-5"></span>
                                     </NuxtLink>
                                 </Tooltip>
                             </div>
@@ -151,8 +161,8 @@ const navKind = computed(() => {
                     <div class="flex">
                         <Tooltip :hotkey="['ctrl', ',']">
                             <button @click="openDialog(DialogType.Settings)"
-                                class="flex items-center justify-center h-7 w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
-                                <span class="i-mynaui-cog-four text-5"></span>
+                                class="flex items-center justify-center h-9 w-9 md:h-7 md:w-7 cursor-pointer @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">
+                                <span class="i-mynaui-cog-four text-6 md:text-5"></span>
                             </button>
                         </Tooltip>
                     </div>
@@ -164,8 +174,17 @@ const navKind = computed(() => {
             </div>
 
         </aside>
-        <!-- resize handle -->
-        <div @mousedown="onResizeStart" class="absolute top-0 right-0 bottom-0 p-1 cursor-ew-resize">
+        <!-- resize handle - hidden on mobile -->
+        <div @mousedown="onResizeStart" class="md:flex hidden absolute top-0 left-full bottom-0 p-1 cursor-ew-resize">
         </div>
     </div>
 </template>
+
+<style>
+@media (max-width: 767px) {
+    .mobile-full-width {
+        width: 100% !important;
+        min-width: 100% !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/Slider.vue b/app/components/Slider.vue
index 2e8727d..8f18b25 100644
--- a/app/components/Slider.vue
+++ b/app/components/Slider.vue
@@ -26,12 +26,16 @@ watch(() => props.checked, (newValue) => {
 
 <template>
     <button :id="id" role="switch"
+    :class="{
+        'checked': active,
+    }"
         class="vl-toggle-switch flex items-center w-[2.5em] h-[1.4em] rounded-[100px] bg-[var(--bg-container)] py-0.5 px-1 transition-[background-color] duration-300 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
         :aria-disabled="(props.disabled === true) ? 'true' : 'false'" :aria-label="label" :aria-labelledby="id"
         :tabindex="(disabled) ? '-1' : '0'" @click="(e) => $emit('click', e)" :aria-checked="active"
         :data-state="(active) ? 'checked' : 'unchecked'">
         <div
-            class="transform-origin-center-left [will-change:tranform] relative left-0 w-[1em] h-[1em] bg-gray-100 rounded-full pointer-events-none transition-all duration-300">
+        :class="active ? 'bg-gray-100' : 'bg-gray-500 dark:bg-gray-100'"
+            class="transform-origin-center-left [will-change:tranform] relative left-0 w-[1em] h-[1em] rounded-full pointer-events-none transition-all duration-300">
         </div>
     </button>
 </template>
diff --git a/app/components/ThemeSwitcher.vue b/app/components/ThemeSwitcher.vue
index faddef7..4669e4b 100644
--- a/app/components/ThemeSwitcher.vue
+++ b/app/components/ThemeSwitcher.vue
@@ -30,7 +30,7 @@ const currentOption = computed(
             <button :ref="setRef" @click="toggle"
                 class="flex items-center justify-center rounded-lg @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
                 :class="{
-                    'h-7 w-7 text-5': size === 'small',
+                    'h-9 w-9 md:h-7 md:w-7 text-5 md:text-6': size === 'small',
                     'h-9 w-9 text-6': size === 'medium',
                     'h-11 w-11 text-7': size === 'large',
                 }">
@@ -46,7 +46,7 @@ const currentOption = computed(
                 }">
                 <span class="text-4.5" :class="option.icon"></span>
                 <span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ option.label
-                }}</span>
+                    }}</span>
             </button>
         </template>
     </Dropdown>
diff --git a/app/composables/useSidebar.ts b/app/composables/useSidebar.ts
index 61c805a..20bb09a 100644
--- a/app/composables/useSidebar.ts
+++ b/app/composables/useSidebar.ts
@@ -37,6 +37,18 @@ export const useSidebar = () => {
         useCookie('sidebar:width').value = sidebarWidth.value.toString();
     };
 
+    // Auto-close sidebar on mobile when navigating
+    if (import.meta.client) {
+        const mobileQuery = window.matchMedia('(max-width: 767px)');
+        const route = useRoute();
+
+        watch(() => route.path, () => {
+            if (mobileQuery.matches && open.value) {
+                open.value = false;
+            }
+        });
+    }
+
     return {
         open: readonly(open),
         toggle,