fix(search): set the toolbar's line count by width, not by results
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m12s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 18s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 18s
PR Checks / Frontend Typecheck + Tests (pull_request) Successful in 1m12s
PR Checks / Backend Smoke (pull_request) Successful in 10s
PR Checks / Build Backend (no push) (pull_request) Successful in 18s
PR Checks / Build Frontend (no push) (pull_request) Successful in 1m19s
PR Checks / Build Pipeline (no push) (pull_request) Successful in 11s
PR Checks / AI Code Review (Claude) (pull_request) Successful in 18s
The results toolbar wrapped wherever it ran out of room, and the List/Map switch only appears when there are results, so the same search took two lines with results and one without. From 1340px the controls never wrap away from the search, which takes what they leave (at least 12rem); phase and type chips cap at 11rem to fit. Between 641px and 1339px the controls always take a full line of their own. The switch now sits in FilterBar's row via a viewSwitch slot, so that line runs the full width instead of stopping short of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
2002529137
commit
8ebe461435
6 files changed
+120
-29
No files matched your search
@@ -572,6 +572,38 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
|
||||
.toHaveAttribute('aria-pressed', 'true');
|
||||
});
|
||||
|
||||
/*
|
||||
* The toolbar's line count is set by the screen width, never by the results.
|
||||
* It once wrapped wherever it ran out of room, and the List/Map switch only
|
||||
* appears when there are results — so the same search took two lines with
|
||||
* results and one without.
|
||||
*/
|
||||
test('the results toolbar keeps its line count whether or not there are results', async ({ page }) => {
|
||||
const withResults = '/?postcode=B1%201BB&radius=1';
|
||||
// No school type matches this, so the same search returns nothing.
|
||||
const without = `${withResults}&school_type=no-such-type`;
|
||||
|
||||
const lines = async (url: string) => {
|
||||
await page.goto(url);
|
||||
// By label: the input is a combobox when autosuggest is on.
|
||||
const input = page.getByLabel('School name or postcode', { exact: true });
|
||||
const filters = page.getByRole('group', { name: 'Filters' });
|
||||
await expect(filters).toBeVisible({ timeout: 15_000 });
|
||||
const a = (await input.boundingBox())!;
|
||||
const b = (await filters.boundingBox())!;
|
||||
return b.y >= a.y + a.height ? 2 : 1;
|
||||
};
|
||||
const view = page.getByRole('group', { name: 'Results view' });
|
||||
|
||||
for (const [width, expected] of [[1400, 1], [1100, 2]] as const) {
|
||||
await page.setViewportSize({ width, height: 800 });
|
||||
expect(await lines(withResults), `${width}px with results`).toBe(expected);
|
||||
await expect(view).toBeVisible();
|
||||
expect(await lines(without), `${width}px without results`).toBe(expected);
|
||||
await expect(view).toHaveCount(0);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Desktop opens a postcode search on the map (mockup B): the list in a pane on
|
||||
* the left, the map filling the rest of the screen, and a card on the map for
|
||||
|
||||
Reference in new issue
Block a user