lew/character-records-generator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(fend): really tedious fixing of overflows and scrollbars between the splits

Browse source
This commit is contained in:
Lewis Wynne 2026-03-23 19:36:55 +00:00
parent be11c0e57a
commit 8875b70a14
6 changed files with 31 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts">
import { onMount } from 'svelte';
import { Eye, PenLine } from 'lucide-svelte';
import Header from '$lib/components/Header.svelte';
import SchemaForm from '$lib/components/SchemaForm.svelte';
import OutputPanel from '$lib/components/OutputPanel.svelte';
@ -8,6 +9,7 @@
import { presets } from '$lib/presets';
let importData = $state<string | null>(null);
let mobileView = $state<'form' | 'preview'>('form');
onMount(() => {
const hash = window.location.hash.slice(1);
@ -22,22 +24,38 @@
}
</script>
<div class="min-h-screen flex flex-col">
<div class="h-dvh flex flex-col overflow-hidden">
<Header />
{#if importData}
<ImportModal encoded={importData} onClose={closeImport} />
<div class="flex-1 overflow-y-auto">
<ImportModal encoded={importData} onClose={closeImport} />
</div>
{:else if roster.active}
{@const char = roster.active}
<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr]">
<div class="p-4">
<main class="flex-1 grid grid-cols-1 lg:grid-cols-[1fr_1fr] overflow-hidden relative">
<div class="overflow-y-auto p-4 {mobileView === 'preview' ? 'hidden lg:block' : ''}">
<div class="max-w-xl mx-auto">
<SchemaForm character={char} />
</div>
</div>
<div class="lg:sticky lg:top-[49px] lg:max-h-[calc(100vh-49px)] overflow-y-auto p-4">
<div class="p-4 min-h-0 flex flex-col {mobileView === 'form' ? 'hidden lg:flex' : ''}">
<OutputPanel character={char} />
</div>
<div class="fixed bottom-4 right-4 lg:hidden z-10">
<button
onclick={() => { mobileView = mobileView === 'form' ? 'preview' : 'form'; }}
class="flex items-center gap-2 px-3 py-2 rounded-full shadow-lg text-sm"
style="background: var(--bg-card); border: 1px solid var(--border); color: var(--text);"
>
{#if mobileView === 'form'}
<Eye size={16} /> Preview
{:else}
<PenLine size={16} /> Edit
{/if}
</button>
</div>
</main>
{:else}
<main class="flex-1 flex flex-col items-center justify-center gap-4">