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

30
src/routes/lineage/+page.svelte
View File

@@ -31,10 +31,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}
@@ -43,23 +43,23 @@
&larr; Chat
</a>
<!-- eslint-enable svelte/no-navigation-without-resolve -->
<h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Agent Lineage</h1>
<h1 class="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100">Agent Lineage</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>
<div class="flex flex-1 overflow-hidden">
<div class="flex flex-1 flex-col md:flex-row overflow-hidden">
<!-- Main tree area -->
<main class="flex-1 overflow-auto p-6">
<main class="flex-1 overflow-auto p-4 md:p-6">
<LineageTree nodes={treeNodes} onSelectNode={handleSelectNode} />
<!-- Legend -->
<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-4 py-3">
<div class="mt-4 flex flex-wrap items-center gap-2 md:gap-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 py-2 md:px-4 md:py-3">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Agent Types:</span>
{#each agentTypeLegend as type (type)}
{@const colors = agentTypeColor(type)}
@@ -76,11 +76,21 @@
</div>
</main>
<!-- Detail panel -->
<!-- Detail panel: overlay on mobile, side panel on desktop -->
{#if selectedNode}
{@const colors = agentTypeColor(selectedNode.agentType)}
<!-- Mobile backdrop -->
<div
class="fixed inset-0 z-40 bg-black/50 md:hidden"
role="button"
tabindex="-1"
onclick={() => (selectedNode = null)}
onkeydown={(e) => { if (e.key === 'Escape') selectedNode = null; }}
aria-label="Close detail panel"
></div>
<aside
class="w-72 shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 overflow-y-auto"
class="fixed inset-y-0 right-0 z-50 w-72 shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 overflow-y-auto
md:relative md:z-auto"
>
<div class="mb-4 flex items-center justify-between">
<h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Agent Details</h2>