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/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>