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

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

View file

@ -23,7 +23,7 @@
}
</script>
<header class="sticky top-0 z-20 flex items-center gap-3 px-4 py-3 border-b" style="border-color: var(--border); background: var(--bg-card);">
<header class="flex items-center gap-3 px-4 py-3 border-b shrink-0" style="border-color: var(--border); background: var(--bg-card);">
<h1 class="font-bold whitespace-nowrap">Aurora Records</h1>
{#if roster.characters.length > 0}

View file

@ -23,7 +23,7 @@
);
</script>
<div class="flex flex-col h-full rounded border" style="border-color: var(--border); background: var(--bg-card);">
<div class="flex flex-col h-full min-h-0 rounded border" style="border-color: var(--border); background: var(--bg-card);">
<div class="flex border-b" style="border-color: var(--border);">
{#each tabs as tab}
<button

View file

@ -16,7 +16,7 @@
}
</script>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full min-h-0">
<div class="flex items-center justify-between px-3 py-2 text-sm" style="color: var(--text-muted);">
<span>{wordCount} words</span>
<button onclick={copy} class="flex items-center gap-1 px-2 py-1 rounded border hover:opacity-80" style="border-color: var(--border);">

View file

@ -1,4 +1,5 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import { ChevronDown } from 'lucide-svelte';
import type { RecordDef } from '$lib/types';
import DynamicField from './fields/DynamicField.svelte';
@ -25,11 +26,11 @@
<section class="rounded border" style="border-color: var(--border); background: var(--bg-card);">
<button
onclick={() => { expanded = !expanded; }}
class="flex items-center w-full px-4 py-3 text-left gap-3"
class="flex items-center w-full px-4 py-3 text-left gap-3 min-h-[44px]"
>
<ChevronDown
size={16}
class="transition-transform shrink-0"
class="shrink-0 transition-transform duration-200"
style="transform: rotate({expanded ? '0' : '-90'}deg); color: var(--text-muted);"
/>
<div class="flex-1 min-w-0">
@ -51,7 +52,7 @@
</button>
{#if expanded}
<div class="px-4 pb-4 flex flex-col gap-4">
<div transition:slide={{ duration: 150 }} class="px-4 pb-4 flex flex-col gap-4">
{#each record.fields as field}
<DynamicField
{field}