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

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

View File

@@ -130,7 +130,7 @@ function clickOutside(node: HTMLElement) {
<label
for={name}
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'}
>{label}</label
>
@@ -146,7 +146,7 @@ function clickOutside(node: HTMLElement) {
onfocus={handleFocus}
placeholder={placeholder ?? m.comp_typeahead_placeholder()}
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'}
/>

View File

@@ -39,7 +39,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-disabled={!senderId}
>
<!-- 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()}
</span>
@@ -50,7 +50,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()}
placeholder={conv_strip_from_placeholder()}
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-line={!fromDate}
/>
@@ -64,7 +64,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
onchange={() => onapplyFilters()}
placeholder={conv_strip_to_placeholder()}
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-line={!toDate}
/>
@@ -72,7 +72,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
<!-- Document count -->
<span
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-ink-3={!hasDateFilter}
>
@@ -86,7 +86,7 @@ let isActive = $derived(!!(fromDate || toDate || sortDir !== 'DESC'));
aria-label="Sortierung umkehren"
aria-pressed={sortDir === 'ASC'}
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:text-primary={isActive}
class:border-line={!isActive}

View File

@@ -55,7 +55,7 @@ function handleSuggestionSelect(id: string) {
type="button"
aria-label="Personen tauschen"
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:pointer-events-none={!swapVisible}
tabindex={swapVisible ? 0 : -1}