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:
@@ -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'}
|
||||
/>
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user