zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mobile responsiveness across UI

Browse Source 
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.
This commit is contained in:
Zoe
2026-04-27 12:06:15 -05:00
parent 8c2cefea49
commit 61c73f394d
13 changed files with 163 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Sidenav/NavHome.vue
+10 -10
View File
@@ -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>