---
title: "Rearrange app screens for narrow windows · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/layout-and-navigation/narrow-layouts
id: APP-82
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 809
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Rearrange app screens for narrow windows

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: APP-82
- Level: Recommended
- Chapter: [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md)
- Rule: Give every app screen a layout for windows from 320 CSS px wide. Collapse side panels into a menu, turn wide tables into stacked rows and move extra toolbar buttons into an overflow menu.
- Check: A browser test opens every route at 320 px and at 1280 px wide. At both widths, `document.documentElement.scrollWidth` is at most the window width, and the main action button is visible.
- How: Many people open a dashboard on a phone, or zoom a desktop browser to 400%, which gives the same width. Change the layout with container queries, so a panel adapts to the space it gets rather than to the screen. Keep the main action of each screen visible without scrolling sideways, as [Never make people scroll sideways](https://agentwranglers.se/playbook/accessibility/seeing-and-reading/no-sideways-scrolling.md) requires. Hide nothing people need. Move it into a menu instead.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### JavaScript example

```js
// Playwright
for (const width of [320, 1280]) {
  await page.setViewportSize({ width, height: 800 });
  await page.goto('/invoices');
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width);
  await expect(page.getByRole('button', { name: 'New invoice' })).toBeVisible();
}
```

### Python example

```python
# Playwright for Python
for width in (320, 1280):
    page.set_viewport_size({"width": width, "height": 800})
    page.goto("/invoices")
    assert page.evaluate("document.documentElement.scrollWidth") <= width
    expect(page.get_by_role("button", name="New invoice")).to_be_visible()
```

## Sources

- [WCAG 2.2 – 1.4.10 Reflow](https://www.w3.org/TR/WCAG22/#reflow)
- [W3C CSS Containment Module Level 3 (container queries)](https://www.w3.org/TR/css-contain-3/)

## Related rules

- AXS-8 [Never make people scroll sideways](https://agentwranglers.se/playbook/accessibility/seeing-and-reading/no-sideways-scrolling.md) in Accessibility

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/app-ui/layout-and-navigation/narrow-layouts">Agent Wranglers web app interface playbook</a>`. In code you write, add a comment next to it with the same link.

- Next: [Offer keyboard shortcuts and a command palette](https://agentwranglers.se/playbook/app-ui/layout-and-navigation/keyboard-shortcuts.md)
- [Layout and navigation](https://agentwranglers.se/playbook/app-ui/layout-and-navigation.md)