diff --git a/public/styles/global.css b/public/styles/global.css index 8977452..34f6140 100644 --- a/public/styles/global.css +++ b/public/styles/global.css @@ -429,6 +429,13 @@ h1 { font-weight: 700; } +.filter-panel legend { + float: left; + width: 100%; + padding: 0; + margin-bottom: 0.75rem; +} + .search-label { display: block; margin-bottom: 0.55rem; @@ -454,11 +461,12 @@ a:focus-visible { } .filter-list { + clear: both; display: grid; gap: 0.4rem; max-height: 18rem; overflow: auto; - margin-top: 0.75rem; + margin-top: 0; } .filter-list label { diff --git a/tests/catalog.spec.ts b/tests/catalog.spec.ts index e507ab2..1075bd2 100644 --- a/tests/catalog.spec.ts +++ b/tests/catalog.spec.ts @@ -136,6 +136,46 @@ test('desktop filter rail scrolls independently from the catalog page', async ({ expect(metrics.listScrollbarColor).not.toBe('auto'); }); +test('sidebar filter titles sit inside their panels', async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 720 }); + await page.goto('/'); + + const panelMetrics = await page.locator('.filter-panel').evaluateAll((panels) => + panels + .map((panel) => { + const legend = panel.querySelector('legend'); + if (!legend) return null; + + const panelBox = panel.getBoundingClientRect(); + const legendBox = legend.getBoundingClientRect(); + const styles = window.getComputedStyle(panel); + + return { + title: legend.textContent?.trim(), + panelTop: panelBox.top, + panelLeft: panelBox.left, + legendTop: legendBox.top, + legendLeft: legendBox.left, + paddingTop: Number.parseFloat(styles.paddingTop), + paddingLeft: Number.parseFloat(styles.paddingLeft), + }; + }) + .filter(Boolean), + ); + + expect(panelMetrics).toEqual( + expect.arrayContaining([ + expect.objectContaining({ title: 'Platform' }), + expect.objectContaining({ title: 'Base' }), + ]), + ); + + for (const metrics of panelMetrics) { + expect(metrics!.legendTop).toBeGreaterThanOrEqual(metrics!.panelTop + metrics!.paddingTop - 1); + expect(metrics!.legendLeft).toBeGreaterThanOrEqual(metrics!.panelLeft + metrics!.paddingLeft - 1); + } +}); + test('detail page renders metadata and private file links', async ({ page }) => { await page.goto('/hack/radical-red/');