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

16
src/routes/memory/+page.svelte
View File

@@ -38,10 +38,10 @@
];
</script>
<div class="flex h-screen flex-col bg-gray-50 dark:bg-gray-900">
<div class="flex h-screen flex-col overflow-hidden bg-gray-50 dark:bg-gray-900">
<!-- Header -->
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-3">
<div class="flex items-center gap-4">
<header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
<div class="flex items-center gap-2 md:gap-4">
<!-- eslint-disable svelte/no-navigation-without-resolve -- resolveRoute is resolve; plugin does not recognize the alias -->
<a
href={chatHref}
@@ -50,19 +50,19 @@
&larr; Chat
</a>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Memory Candidates</h1>
<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">Memory Candidates</h1>
</div>
<div class="flex items-center gap-2">
<ThemeToggle />
<span class="rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
<span class="hidden sm:inline rounded-md bg-amber-50 dark:bg-amber-900/30 px-2 py-1 text-xs text-amber-700 dark:text-amber-300">
Sample Data
</span>
</div>
</header>
<!-- Filters -->
<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-3">
<div class="flex flex-wrap items-center gap-4">
<div class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 py-3 md:px-6">
<div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-4">
<div class="flex items-center gap-2">
<label for="source-filter" class="text-xs font-medium text-gray-500 dark:text-gray-400">Source</label>
<select
@@ -101,7 +101,7 @@
</div>
<!-- Content -->
<main class="flex-1 overflow-auto p-6">
<main class="flex-1 overflow-auto p-4 md:p-6">
{#if filteredSessions.length === 0}
<div class="flex flex-col items-center justify-center py-16 text-center">
<div class="mb-3 text-4xl text-gray-300 dark:text-gray-600">&#128203;</div>