Forms on a wide screen: boxes 2,214 pixels wide on Your details and Settings, and three more forms that could use two columns #320

New issue

Closed

opened 2026-09-29 16:54:17 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-29 16:54:17 +00:00

Owner

#210 let the company form use the whole screen, with its two cards side by side from 2xl (1536 pixels) and each card stopping at max-w-2xl at the start edge. Working on it found two things it deliberately left alone.

Forms whose boxes run the width of the frame

On a 2560-pixel screen the text boxes on Your details, Settings → Account and Settings → Language and time are 2,214 pixels wide (measured in Chromium). #198 widened those pages because the sidebar and the page wanted a grid, and the reading measure it meant to keep on the fields was never put on them. The pages that do keep one (allauth's pages under Settings: email, password, the second factor, the social accounts; and Export, Import, Delete account) do it with max-w-2xl on the card or a wrapper, at the start edge, without mx-auto. That is the one mechanism the code has, and #210 reused it.

What to do: give the cards on Your details and the remaining Settings pages the same cap, or decide on a field-level measure and use it everywhere. The comment on main_width in base.html now says these forms "keep no measure of their own yet".

Other forms of the company form's shape

Looked at, and left for their own decision:

jobs/contact_form.html fits best: a details card, then zero or more cards of rows (telephone numbers when that feature is on, one card of links per kind switched on). The details in one column and the stack of rows in the other. It needs an answer for when the second column is empty, and for its Merge button, which sits at the end with ms-auto.
jobs/listing_form.html (max-w-3xl): three cards. The role, money and dates could sit beside the description, but at 768-pixel columns the same rule needs a 1592-pixel window, above 2xl: it needs its own measurement, or cards at the company form's width.
jobs/capture_form.html: the form (address and pasted page) could sit beside How this works and Sources installed.
Not a fit: resume/translations.html (two steps in order), jobs/merge.html (one narrative before a destructive button), and the one-card forms, which have nothing to split and should keep the page's measure: posting_form, listing_apply, upload_form, letter_form, cv_form, cv_item_form, documents/send, resume/item_form, application_form.

tests/test_width.py and tests/e2e/test_width.py now hold the company form to its rule; a form that follows it joins them.

#210 let the company form use the whole screen, with its two cards side by side from `2xl` (1536 pixels) and each card stopping at `max-w-2xl` at the start edge. Working on it found two things it deliberately left alone. ## Forms whose boxes run the width of the frame On a 2560-pixel screen the text boxes on *Your details*, *Settings → Account* and *Settings → Language and time* are **2,214 pixels wide** (measured in Chromium). #198 widened those pages because the sidebar and the page wanted a grid, and the reading measure it meant to keep on the fields was never put on them. The pages that do keep one (allauth's pages under *Settings*: email, password, the second factor, the social accounts; and *Export*, *Import*, *Delete account*) do it with `max-w-2xl` on the card or a wrapper, at the start edge, without `mx-auto`. That is the one mechanism the code has, and #210 reused it. What to do: give the cards on *Your details* and the remaining *Settings* pages the same cap, or decide on a field-level measure and use it everywhere. The comment on `main_width` in `base.html` now says these forms "keep no measure of their own yet". ## Other forms of the company form's shape Looked at, and left for their own decision: - **`jobs/contact_form.html`** fits best: a details card, then zero or more cards of rows (telephone numbers when that feature is on, one card of links per kind switched on). The details in one column and the stack of rows in the other. It needs an answer for when the second column is empty, and for its *Merge* button, which sits at the end with `ms-auto`. - **`jobs/listing_form.html`** (`max-w-3xl`): three cards. The role, money and dates could sit beside the description, but at 768-pixel columns the same rule needs a 1592-pixel window, above `2xl`: it needs its own measurement, or cards at the company form's width. - **`jobs/capture_form.html`**: the form (address and pasted page) could sit beside *How this works* and *Sources installed*. - **Not a fit**: `resume/translations.html` (two steps in order), `jobs/merge.html` (one narrative before a destructive button), and the one-card forms, which have nothing to split and should keep the page's measure: `posting_form`, `listing_apply`, `upload_form`, `letter_form`, `cv_form`, `cv_item_form`, `documents/send`, `resume/item_form`, `application_form`. `tests/test_width.py` and `tests/e2e/test_width.py` now hold the company form to its rule; a form that follows it joins them.

tiagoagueda added the

enhancement

interface

labels

2026-09-29 16:54:17 +00:00

tiagoagueda added this to the 0.5.0 milestone

2026-09-29 18:38:01 +00:00

tiagoagueda referenced this issue from a commit

2026-09-29 21:40:58 +00:00

Keep the forms beside a sidebar to a measure, and set two more forms in two columns

tiagoagueda closed this issue

2026-09-29 21:40:58 +00:00