fix: align sidebar filter titles
This commit is contained in:
@@ -429,6 +429,13 @@ h1 {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.filter-panel legend {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.search-label {
|
.search-label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 0.55rem;
|
margin-bottom: 0.55rem;
|
||||||
@@ -454,11 +461,12 @@ a:focus-visible {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.filter-list {
|
.filter-list {
|
||||||
|
clear: both;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.4rem;
|
gap: 0.4rem;
|
||||||
max-height: 18rem;
|
max-height: 18rem;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin-top: 0.75rem;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-list label {
|
.filter-list label {
|
||||||
|
|||||||
@@ -136,6 +136,46 @@ test('desktop filter rail scrolls independently from the catalog page', async ({
|
|||||||
expect(metrics.listScrollbarColor).not.toBe('auto');
|
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 }) => {
|
test('detail page renders metadata and private file links', async ({ page }) => {
|
||||||
await page.goto('/hack/radical-red/');
|
await page.goto('/hack/radical-red/');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user