Your details on phones: the section menu is not drawn #929

New issue

Closed

opened 2026-10-15 17:19:49 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:49 +00:00

Owner

On a phone held upright, the section menu of Your details (the list of the page's parts) is reported as not drawn at all.

What exists today

templates/accounts/profile.html: <aside class="mb-6 lg:sticky … lg:w-56 lg:shrink-0"> holds the label data-section-label ("On this page") and {% sidebar section_nav _("Parts of your details") %}. Nothing in the template hides the aside below lg.
templates/partials/sidebar.html says what it should be on a narrow screen: "A horizontal strip that scrolls on a narrow screen, a column from lg up". It is <ul class="flex gap-1 scroll-x lg:flex-col">, drawn as vertical tabs (#870, nav[data-vertical-tabs] in assets/css/app.css).
Settings and Your career use the same partial.

What is wrong

Reported on a phone, portrait: no section menu is visible. Not reproduced here. The cause has to be found in a browser at 360–412px. Check whether the strip is drawn with no height or off-screen, whether the vertical-tabs paint (nav[data-vertical-tabs] > ul, rounded-lg bg-ink-100 p-1) collapses it, and whether Your career and Settings show the same.

Expected

Below lg, the strip is drawn under the page heading and scrolls sideways, with the current section marked (aria-current="location", set by the section observer in app.js) and scrolled into view.
Whether it should also stick under the masthead on a phone while the page scrolls is a design choice. Not requested.

To check

A browser test at 360px that the strip is visible and every entry reachable, on Your details, Your career and Settings.

Related: #870, #871, #869, #175.

Checked against main at 56fc9d531.

On a phone held upright, the section menu of *Your details* (the list of the page's parts) is reported as not drawn at all. ## What exists today - `templates/accounts/profile.html`: `<aside class="mb-6 lg:sticky … lg:w-56 lg:shrink-0">` holds the label `data-section-label` ("On this page") and `{% sidebar section_nav _("Parts of your details") %}`. Nothing in the template hides the aside below `lg`. - `templates/partials/sidebar.html` says what it should be on a narrow screen: "A horizontal strip that scrolls on a narrow screen, a column from `lg` up". It is `<ul class="flex gap-1 scroll-x lg:flex-col">`, drawn as vertical tabs (#870, `nav[data-vertical-tabs]` in `assets/css/app.css`). - Settings and Your career use the same partial. ## What is wrong - Reported on a phone, portrait: no section menu is visible. Not reproduced here. The cause has to be found in a browser at 360–412px. Check whether the strip is drawn with no height or off-screen, whether the vertical-tabs paint (`nav[data-vertical-tabs] > ul`, `rounded-lg bg-ink-100 p-1`) collapses it, and whether Your career and Settings show the same. ## Expected - Below `lg`, the strip is drawn under the page heading and scrolls sideways, with the current section marked (`aria-current="location"`, set by the section observer in `app.js`) and scrolled into view. - Whether it should also stick under the masthead on a phone while the page scrolls is a design choice. Not requested. ## To check - A browser test at 360px that the strip is visible and every entry reachable, on Your details, Your career and Settings. Related: #870, #871, #869, #175. Checked against `main` at `56fc9d531`.

tiagoagueda added the

bug

interface

labels

2026-10-15 17:19:50 +00:00

tiagoagueda referenced this issue

2026-10-15 17:20:13 +00:00

Your details: an icon on every entry of the section menu #920

tiagoagueda referenced this issue

2026-10-15 17:20:14 +00:00

Your details on phones: scrolled, the page's name replaces the instance's name and logo in the masthead #930

tiagoagueda referenced this issue from a commit