fix: align sidebar filter titles

This commit is contained in:
ginnoir
2026-06-09 18:20:24 -05:00
parent 759d4a6b86
commit f3bc721d4a
2 changed files with 49 additions and 1 deletions
+9 -1
View File
@@ -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 {
+40
View File
@@ -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/');