Masthead on phones: the search takes the whole row, and works like the page searches #833

New issue

Closed

opened 2026-10-10 15:50:07 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 15:50:07 +00:00

Owner

On mobile and vertical screens, opening the search should hide the Postulo logo, the instance name and the + menu, leaving only the account avatar; and the masthead search should behave like the dedicated searches on Listings, Applications and Companies. Documents already does.

What exists today

templates/cotton/site_search.html, from base.html:127, has two modes:

Everything (every page that does not fill {% block site_search %}, the Documents pages among them). Below lg it is a link to /search/ that, with scripts, opens the form in place of the wordmark (#350, app.js:2626-2696, app.css:1958-2003): the wordmark and the magnifier are hidden, the + menu and the account menu stay (app.css:1962-1963), the input is 16 px, has a close button, and Escape closes it. Submitting goes to the search page.
Table (Listings, Applications, Companies: jobs/listing_list.html:11, applications/application_list.html:9, jobs/company_list.html:9). Below lg the magnifier opens a popover drawn as a bar under the masthead (#313, app.css:1893-1898); the wordmark and the + menu stay. The input sits in an input group with search this table and Search everything buttons and narrows the table live (hx-trigger="input changed delay:300ms"). Its text is text-sm at every width (site_search.html:92), so iOS zooms on focus.

What would change

Table mode below lg opens in the masthead row the way everything mode does, keeping its input group and live narrowing; the popover stays as the no-script fallback.
When the search is open, the + menu is hidden too (it needs a hook attribute, e.g. data-new-menu); only the avatar remains.
The table-mode input becomes 16 px below lg.

Decisions

What "like the page searches" means. Read here as: the masthead's in-row expansion (Documents' behaviour) also for the table searches, with their live narrowing kept. The other reading — giving the everything search the table searches' input group — is not what this issue proposes. Recommended: the first; to be confirmed.
Hiding the + menu removes the way to add something while searching; recommended, as asked, since the close button brings it back.

Tests that name these attributes: tests/test_navigation.py, tests/test_keyboard_and_focus.py, the browser suite.

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

On mobile and vertical screens, opening the search should hide the Postulo logo, the instance name and the **+** menu, leaving only the account avatar; and the masthead search should behave like the dedicated searches on Listings, Applications and Companies. Documents already does. ## What exists today `templates/cotton/site_search.html`, from `base.html:127`, has two modes: - **Everything** (every page that does not fill `{% block site_search %}`, the Documents pages among them). Below `lg` it is a link to `/search/` that, with scripts, opens the form in place of the wordmark (#350, `app.js:2626-2696`, `app.css:1958-2003`): the wordmark and the magnifier are hidden, **the + menu and the account menu stay** (`app.css:1962-1963`), the input is 16 px, has a close button, and Escape closes it. Submitting goes to the search page. - **Table** (Listings, Applications, Companies: `jobs/listing_list.html:11`, `applications/application_list.html:9`, `jobs/company_list.html:9`). Below `lg` the magnifier opens a popover drawn as a bar **under** the masthead (#313, `app.css:1893-1898`); the wordmark and the + menu stay. The input sits in an input group with *search this table* and *Search everything* buttons and narrows the table live (`hx-trigger="input changed delay:300ms"`). Its text is `text-sm` at every width (`site_search.html:92`), so iOS zooms on focus. ## What would change - Table mode below `lg` opens in the masthead row the way everything mode does, keeping its input group and live narrowing; the popover stays as the no-script fallback. - When the search is open, the **+** menu is hidden too (it needs a hook attribute, e.g. `data-new-menu`); only the avatar remains. - The table-mode input becomes 16 px below `lg`. ## Decisions - **What "like the page searches" means.** Read here as: the masthead's in-row expansion (Documents' behaviour) also for the table searches, with their live narrowing kept. The other reading — giving the everything search the table searches' input group — is not what this issue proposes. Recommended: the first; to be confirmed. - **Hiding the + menu** removes the way to add something while searching; recommended, as asked, since the close button brings it back. Tests that name these attributes: `tests/test_navigation.py`, `tests/test_keyboard_and_focus.py`, the browser suite. Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 15:50:07 +00:00

tiagoagueda added the

interface

enhancement

labels

2026-10-10 15:50:07 +00:00

tiagoagueda referenced this issue

2026-10-10 16:01:21 +00:00

Masthead search on Documents and the Calendar: their own things first, everything on request #848

tiagoagueda self-assigned this

2026-10-10 17:52:49 +00:00