llm-multiverse/llm-multiverse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive layout and mobile support (#19)

Browse Source 
Add collapsible sidebars with slide-in drawers on mobile, hamburger menu
for session sidebar, stacked layouts for screens under 768px, 44px touch
targets, and overflow prevention across all pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 13:17:02 +01:00
parent d837ed9050
commit dfef26bad5
11 changed files with 268 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/lib/components/ConfigSidebar.svelte
View File

@@ -7,8 +7,13 @@
let {
config,
onConfigChange
}: { config: SessionConfig; onConfigChange: (config: SessionConfig) => void } = $props();
onConfigChange,
onClose
}: {
config: SessionConfig;
onConfigChange: (config: SessionConfig) => void;
onClose?: () => void;
} = $props();
let newPermission = $state('');
let newPresetName = $state('');
@@ -115,7 +120,23 @@
}
</script>
<aside class="flex h-full w-72 flex-col border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
<!-- Mobile overlay backdrop -->
{#if onClose}
<div
class="fixed inset-0 z-40 bg-black/50 md:hidden"
role="button"
tabindex="-1"
onclick={onClose}
onkeydown={(e) => { if (e.key === 'Escape') onClose?.(); }}
aria-label="Close config sidebar"
></div>
{/if}
<aside
class="flex h-full w-72 flex-col border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900
fixed inset-y-0 right-0 z-50
md:relative md:z-auto"
>
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 px-4 py-3">
<div class="flex items-center gap-2">
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Session Config</h2>
@@ -123,13 +144,25 @@
<span class="h-2 w-2 rounded-full bg-amber-500" title="Non-default config active"></span>
{/if}
</div>
<button
type="button"
onclick={resetConfig}
class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
>
Reset
</button>
<div class="flex items-center gap-2">
<button
type="button"
onclick={resetConfig}
class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
>
Reset
</button>
{#if onClose}
<button
type="button"
onclick={onClose}
class="flex h-7 w-7 items-center justify-center rounded text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300 md:hidden"
aria-label="Close config sidebar"
>
&#10005;
</button>
{/if}
</div>
</div>
<div class="flex-1 overflow-y-auto p-4 space-y-5">