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

style(documents): gate timeline bar hover under (hover: hover) (#385)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 11:32:31 +02:00
parent dd0a77a5a2
commit 18aaf1f3e8
2 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/document/TimelineBars.svelte
View File

@@ -104,9 +104,13 @@ function barHeight(count: number): number {
opacity: 0.7;
}
.bar:hover .bar-fill {
background-color: var(--palette-mint, #a1dcd8);
opacity: 0.85;
/* Gate hover under (hover: hover) so emulated mouse events on touch devices
don't leave a tapped bar stuck in :hover until the next tap elsewhere. */
@media (hover: hover) {
.bar:hover .bar-fill {
background-color: var(--palette-mint, #a1dcd8);
opacity: 0.85;
}
}
/* Graylog-style range selector window: left/right borders mark the dragged

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

@@ -348,6 +348,21 @@ describe('TimelineDensityFilter — touch targets', () => {
expect(clearBtn.className).toMatch(/focus-visible:ring-brand-navy/);
expect(clearBtn.className).toMatch(/focus-visible:ring-offset-2/);
});
it('bar hover style is gated by @media (hover: hover) to avoid touch-device hover-stick', async () => {
render(TimelineDensityFilter, makeProps());
const cssText = Array.from(document.styleSheets)
.flatMap((sheet) => {
try {
return Array.from(sheet.cssRules);
} catch {
return [];
}
})
.map((rule) => rule.cssText)
.join('\n');
expect(cssText).toMatch(/@media \(hover: hover\)/);
});
});
describe('TimelineDensityFilter — accessibility', () => {