marcel/familienarchiv
1
0
Fork 0
Code Issues 102 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(korrespondenz): scale up strip rows to readable sizes

Browse Source 
Spec measurements (7px/8px/9px text) were spec-document zoom artifacts — not
viable at real browser scale. Updated to readable compact sizes:
- Row 1 compact label: text-xs (12px) uppercase instead of 7px
- Row 1 input: h-9 text-sm (36px/14px) instead of 30px/9px
- Row 1 swap button: h-9 w-9 to align with taller inputs
- Row 2 date inputs: h-8 text-xs (32px/12px) instead of 22px/8px
- Row 2 label/count/sort: text-xs instead of 7px/8px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-30 14:35:47 +02:00
parent 5fd7e41492
commit a3a7af123d
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/PersonTypeahead.svelte
View File

@@ -130,7 +130,7 @@ function clickOutside(node: HTMLElement) {
<label <label
for={name} for={name}
class={compact class={compact
? 'block text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase' ? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
: 'block text-sm font-medium text-ink-2'} : 'block text-sm font-medium text-ink-2'}
>{label}</label >{label}</label
> >
@@ -146,7 +146,7 @@ function clickOutside(node: HTMLElement) {
onfocus={handleFocus} onfocus={handleFocus}
placeholder={placeholder ?? m.comp_typeahead_placeholder()} placeholder={placeholder ?? m.comp_typeahead_placeholder()}
class={compact class={compact
? 'block h-[30px] w-full rounded-[3px] border-[1.5px] border-line bg-surface px-[7px] text-[9px] text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none' ? 'mt-1 block h-9 w-full rounded border border-line bg-surface px-2 text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:outline-none'
: 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'} : 'mt-1 block w-full rounded-md border border-line bg-surface p-2 text-ink shadow-sm placeholder:text-ink-3 focus:border-accent focus:ring-accent'}
/> />

10
frontend/src/routes/korrespondenz/CorrespondenzFilterControls.svelte
View File

@@ -39,7 +39,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-disabled={!senderId} aria-disabled={!senderId}
> >
<!-- Period label --> <!-- Period label -->
<span class="hidden text-[7px] font-extrabold tracking-[0.5px] text-ink-3 uppercase sm:block"> <span class="hidden text-xs font-bold tracking-wide text-ink-3 uppercase sm:block">
{conv_strip_period()} {conv_strip_period()}
</span> </span>
@@ -50,7 +50,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()} onchange={() => onapplyFilters()}
placeholder={conv_strip_from_placeholder()} placeholder={conv_strip_from_placeholder()}
aria-label="Von" aria-label="Von"
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0" class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
class:border-primary={!!fromDate} class:border-primary={!!fromDate}
class:border-line={!fromDate} class:border-line={!fromDate}
/> />
@@ -64,7 +64,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()} onchange={() => onapplyFilters()}
placeholder={conv_strip_to_placeholder()} placeholder={conv_strip_to_placeholder()}
aria-label="Bis" aria-label="Bis"
class="h-[22px] min-h-[44px] w-[80px] rounded-[3px] border-[1.5px] bg-surface px-1 text-[8px] text-ink focus:outline-none sm:min-h-0" class="h-8 min-h-[44px] w-[100px] rounded border bg-surface px-2 text-xs text-ink focus:outline-none sm:min-h-0"
class:border-primary={!!toDate} class:border-primary={!!toDate}
class:border-line={!toDate} class:border-line={!toDate}
/> />
@@ -72,7 +72,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
<!-- Document count --> <!-- Document count -->
<span <span
data-testid="conv-strip-count" data-testid="conv-strip-count"
class="ml-auto text-[8px] font-bold" class="ml-auto text-xs font-bold"
class:text-primary={hasDateFilter} class:text-primary={hasDateFilter}
class:text-ink-3={!hasDateFilter} class:text-ink-3={!hasDateFilter}
> >
@@ -86,7 +86,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-label="Sortierung umkehren" aria-label="Sortierung umkehren"
aria-pressed={sortDir === 'ASC'} aria-pressed={sortDir === 'ASC'}
onclick={ontoggleSort} onclick={ontoggleSort}
class="flex h-[22px] min-h-[44px] items-center gap-1 rounded-[3px] border-[1.5px] px-2 text-[8px] font-bold sm:min-h-0" class="flex h-8 min-h-[44px] items-center gap-1 rounded border px-3 text-xs font-bold sm:min-h-0"
class:border-primary={isActive} class:border-primary={isActive}
class:text-primary={isActive} class:text-primary={isActive}
class:border-line={!isActive} class:border-line={!isActive}

2
frontend/src/routes/korrespondenz/CorrespondenzPersonBar.svelte
View File

@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
type="button" type="button"
aria-label="Personen tauschen" aria-label="Personen tauschen"
onclick={onswapPersons} onclick={onswapPersons}
class="mb-[1px] flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[3px] border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary" class="flex h-9 w-9 shrink-0 items-center justify-center rounded border border-line bg-surface text-ink-3 transition-colors hover:border-primary hover:text-primary"
class:opacity-0={!swapVisible} class:opacity-0={!swapVisible}
class:pointer-events-none={!swapVisible} class:pointer-events-none={!swapVisible}
tabindex={swapVisible ? 0 : -1} tabindex={swapVisible ? 0 : -1}