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

style(documents): timeline axis text to 12px / h-4 (#385)

Browse Source 
text-[10px] failed Leonie's 12px font floor. Bumps Y-axis labels and
the X-axis tick row to text-xs (12px); the X-axis row grows to h-4 to
accommodate the line height. Regression-pinned via two new specs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 09:54:43 +02:00
parent dfdcacdb85
commit ea106e9414
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/document/TimelineDensityFilter.svelte
View File

@@ -241,7 +241,7 @@ const omitTickYear = $derived.by(() => {
>
<div class="flex">
<div
class="flex flex-col justify-between pr-1.5 text-right font-sans text-[10px] leading-none text-ink-3"
class="flex flex-col justify-between pr-1.5 text-right font-sans text-xs leading-none text-ink-3"
style="height: {BAR_AREA_HEIGHT}px;"
aria-hidden="true"
data-testid="timeline-y-axis"
@@ -288,7 +288,7 @@ const omitTickYear = $derived.by(() => {
</div>
<div
class="relative mt-1 h-3 font-sans text-[10px] leading-none text-ink-3"
class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
aria-hidden="true"
data-testid="timeline-x-axis"
>

15
frontend/src/lib/document/TimelineDensityFilter.svelte.spec.ts
View File

@@ -309,6 +309,21 @@ describe('TimelineDensityFilter — zoom', () => {
});
describe('TimelineDensityFilter — accessibility', () => {
it('Y-axis labels meet the 12px minimum font floor (Tailwind text-xs)', async () => {
render(TimelineDensityFilter, makeProps());
const yAxis = document.querySelector('[data-testid="timeline-y-axis"]') as HTMLElement;
expect(yAxis.classList.contains('text-xs')).toBe(true);
expect(yAxis.className).not.toMatch(/text-\[10px\]/);
});
it('X-axis row uses text-xs and h-4 to fit the 12px line height', async () => {
render(TimelineDensityFilter, makeProps());
const xAxis = document.querySelector('[data-testid="timeline-x-axis"]') as HTMLElement;
expect(xAxis.classList.contains('text-xs')).toBe(true);
expect(xAxis.classList.contains('h-4')).toBe(true);
expect(xAxis.className).not.toMatch(/text-\[10px\]/);
});
it('bar aria-label is built from a localised template, never the raw YYYY-MM', async () => {
render(
TimelineDensityFilter,