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/Item.vue
+8 -8
View File
@@ -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>