The company editing page should use the full width, in two columns on a wide screen #210

New issue

Open

opened 2026-09-15 19:28:07 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-15 19:28:07 +00:00

Owner

The company editing page (Companies → New and Edit, jobs:company_create and jobs:company_update) is a narrow column centred on the screen. It should use the full width of the page and, on a wide screen, set its parts in two columns.

What narrows it today

src/postulo/templates/jobs/company_form.html is capped twice:

base.html:160 caps <main> at max-w-7xl (1280 px), unless the page empties the main_width block. The company list already empties it (#188); the form does not.
company_form.html:7 then wraps everything in mx-auto max-w-2xl (672 px).

As a result, on a 2560-pixel monitor, a form with a lot in it is drawn in 672 pixels:

a first card with name, kind, the known-service picker (#202), website, careers address, location, the industries checkboxes and new-industry box, and notes;
a second card, Identifiers, whose rows are already a four-column grid (sm:grid-cols-[12rem_1fr_10rem_auto]) squeezed into that width, plus the What goes where list.

The rule this touches

#188 wrote down grids use the whole screen; everything else keeps its measure. #198 then widened Your details, Settings and Server settings anyway, on the grounds that the frame is not the paragraph: the reading measure belongs on fields and text blocks, not on the whole page. This page is a form, so it needs the same decision stated for it, and the comment in base.html (lines 152–159) should end up saying where the line now is.

What a fix has to settle

Width. Empty main_width in company_form.html and drop the inner max-w-2xl, keeping the 16-pixel gutters <main> already has.
Two columns on a wide screen. The natural split is the two cards the form already has: Company (details, industries, notes) on one side, Identifiers on the other. Alternatively, split the first card itself (name, kind, service, addresses | location, industries, notes). Choose the breakpoint (lg: or xl:) so that neither column is narrower than today's single one. Below it, one column exactly as now.
The reading measure. A text input stretched to 1200 px is harder to use, not easier. Keep a sensible maximum on fields and on the notes textarea, or let the columns provide it.
Source order stays the reading order. Two columns must not reorder things for keyboard or screen-reader users. The grid should follow DOM order (no order-*), with Save and Cancel after both columns.
Logical utilities only (ms/me, start/end); tests/test_template_lint.py fails on a physical side, and the layout has to mirror correctly right to left.
The same pattern elsewhere. contact_form.html, posting_form.html and the other max-w-2xl forms have the same shape. This issue is about the company page; whether the others follow should be decided here and filed separately, not done quietly as part of this.

Checks

The browser suite (tests/e2e/test_accessibility.py) walks pages at several widths and languages; #165 and #167 found overflows exactly when widths changed. Add the company form at a wide viewport if it is not already visited there.
npm run build:css for any new grid classes (the compiled stylesheet is committed).

The company editing page (*Companies → New* and *Edit*, `jobs:company_create` and `jobs:company_update`) is a narrow column centred on the screen. It should use the full width of the page and, on a wide screen, set its parts in two columns. ## What narrows it today `src/postulo/templates/jobs/company_form.html` is capped twice: 1. `base.html:160` caps `<main>` at `max-w-7xl` (1280 px), unless the page empties the `main_width` block. The company *list* already empties it (#188); the form does not. 2. `company_form.html:7` then wraps everything in `mx-auto max-w-2xl` (672 px). As a result, on a 2560-pixel monitor, a form with a lot in it is drawn in 672 pixels: - a first card with name, kind, the known-service picker (#202), website, careers address, location, the industries checkboxes and new-industry box, and notes; - a second card, *Identifiers*, whose rows are already a four-column grid (`sm:grid-cols-[12rem_1fr_10rem_auto]`) squeezed into that width, plus the *What goes where* list. ## The rule this touches #188 wrote down *grids use the whole screen; everything else keeps its measure*. #198 then widened *Your details*, *Settings* and *Server settings* anyway, on the grounds that the frame is not the paragraph: the reading measure belongs on fields and text blocks, not on the whole page. This page is a form, so it needs the same decision stated for it, and the comment in `base.html` (lines 152–159) should end up saying where the line now is. ## What a fix has to settle - **Width.** Empty `main_width` in `company_form.html` and drop the inner `max-w-2xl`, keeping the 16-pixel gutters `<main>` already has. - **Two columns on a wide screen.** The natural split is the two cards the form already has: *Company* (details, industries, notes) on one side, *Identifiers* on the other. Alternatively, split the first card itself (name, kind, service, addresses | location, industries, notes). Choose the breakpoint (`lg:` or `xl:`) so that neither column is narrower than today's single one. Below it, one column exactly as now. - **The reading measure.** A text input stretched to 1200 px is harder to use, not easier. Keep a sensible maximum on fields and on the notes textarea, or let the columns provide it. - **Source order stays the reading order.** Two columns must not reorder things for keyboard or screen-reader users. The grid should follow DOM order (no `order-*`), with *Save* and *Cancel* after both columns. - **Logical utilities only** (`ms`/`me`, `start`/`end`); `tests/test_template_lint.py` fails on a physical side, and the layout has to mirror correctly right to left. - **The same pattern elsewhere.** `contact_form.html`, `posting_form.html` and the other `max-w-2xl` forms have the same shape. This issue is about the company page; whether the others follow should be decided here and filed separately, not done quietly as part of this. ## Checks - The browser suite (`tests/e2e/test_accessibility.py`) walks pages at several widths and languages; #165 and #167 found overflows exactly when widths changed. Add the company form at a wide viewport if it is not already visited there. - `npm run build:css` for any new grid classes (the compiled stylesheet is committed).

tiagoagueda added the

enhancement

interface

labels

2026-09-15 19:28:07 +00:00

tiagoagueda added this to the 0.6.0 milestone

2026-09-15 21:33:33 +00:00

tiagoagueda referenced this issue

2026-09-17 17:26:21 +00:00

Adopt Basecoat for the component layer, while most of the interface is still unwritten #262