fix(web): stop Tailwind v4.3 container capping content below 1400px #340

Merged

Claude-Run merged 1 commit from fix/BUNYIP-338-container-fills-viewport into main

2026-07-04 07:49:22 +02:00

Claude-Run commented

2026-07-04 07:31:09 +02:00

Member

Tailwind CSS v4.3.0 ships a built-in container utility that emits a max-width at every breakpoint (sm 40rem through 2xl 96rem). Those core rules override the repo's custom @utility container (which intended full width plus a 2rem gutter, capped only at 1400px), so .container content was sequestered in a box narrower than the viewport at every width below 1400px: 768px on an 800px screen, 1024px on a 1200px screen, 1280px on a 1366px screen. The public / marketing shell (header, footer, hero and app-grid sections all use container) therefore did not fill the page. The dashboard and admin shells use a flex layout with no container and were unaffected.

Add max-width: none to the base of the custom @utility container. It is emitted after the core breakpoint rules, so it overrides their caps and restores the intended full-width behaviour below 1400px; the existing @media (width >= 1400px) block then re-applies the single 1400px cap on very wide screens. Verified in a headless browser: .container now measures full viewport width at 800/1000/1200/1366px and caps at 1400px at 1440/1600px, while the dashboard shell still fills the page.

Regenerate the committed assets/styles.css with the production build:css invocation so the tracked artifact matches input.css.

#BUNYIP-338

Tailwind CSS v4.3.0 ships a built-in `container` utility that emits a max-width at every breakpoint (sm 40rem through 2xl 96rem). Those core rules override the repo's custom `@utility container` (which intended full width plus a 2rem gutter, capped only at 1400px), so `.container` content was sequestered in a box narrower than the viewport at every width below 1400px: 768px on an 800px screen, 1024px on a 1200px screen, 1280px on a 1366px screen. The public / marketing shell (header, footer, hero and app-grid sections all use `container`) therefore did not fill the page. The dashboard and admin shells use a flex layout with no `container` and were unaffected. Add `max-width: none` to the base of the custom `@utility container`. It is emitted after the core breakpoint rules, so it overrides their caps and restores the intended full-width behaviour below 1400px; the existing `@media (width >= 1400px)` block then re-applies the single 1400px cap on very wide screens. Verified in a headless browser: `.container` now measures full viewport width at 800/1000/1200/1366px and caps at 1400px at 1440/1600px, while the dashboard shell still fills the page. Regenerate the committed assets/styles.css with the production `build:css` invocation so the tracked artifact matches input.css. #BUNYIP-338

Claude-Run added 1 commit

2026-07-04 07:31:09 +02:00

fix(web): stop Tailwind v4.3 container capping content below 1400px

E2E / Playwright against deployment (pull_request) Successful in 43s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 17m44s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

2c75094343

Tailwind CSS v4.3.0 ships a built-in `container` utility that emits a max-width at every breakpoint (sm 40rem through 2xl 96rem). Those core rules override the repo's custom `@utility container` (which intended full width plus a 2rem gutter, capped only at 1400px), so `.container` content was sequestered in a box narrower than the viewport at every width below 1400px: 768px on an 800px screen, 1024px on a 1200px screen, 1280px on a 1366px screen. The public / marketing shell (header, footer, hero and app-grid sections all use `container`) therefore did not fill the page. The dashboard and admin shells use a flex layout with no `container` and were unaffected.

Add `max-width: none` to the base of the custom `@utility container`. It is emitted after the core breakpoint rules, so it overrides their caps and restores the intended full-width behaviour below 1400px; the existing `@media (width >= 1400px)` block then re-applies the single 1400px cap on very wide screens. Verified in a headless browser: `.container` now measures full viewport width at 800/1000/1200/1366px and caps at 1400px at 1440/1600px, while the dashboard shell still fills the page.

Regenerate the committed assets/styles.css with the production `build:css` invocation so the tracked artifact matches input.css.

#BUNYIP-338