Long articles open with an outline of their sections. That outline now behaves: it stays put on wide screens and starts closed under a labelled row on phones, opening with one tap. Start from the build log to see the pattern on any recent entry.
Motivation
On a phone, the section outline sat above the prose and pushed the headline and the opening lines down the first view. Readers on small screens had to scroll past the whole outline before reaching the article itself. The parent proposal asked for the outline to start closed on small screens while leaving the wide-screen sidebar untouched.
What changed
The article template now wraps the sidebar outline in a native disclosure pair: the label lives in the summary row and the outline links sit inside the collapsible region, written once with no repeated markup. Wide screens render the pair forced open with an inert label, visually identical to the old sidebar. Small screens show a tall labelled row with a drawn marker that opens the outline on tap and starts closed on every page load.
How it was done
No scripts ship with the change and no new palette entries were added: the marker is drawn with borders, the tap row reuses the existing touch height, and the small-screen rules live at the current phone breakpoint. The wide-screen rule forces the collapsible region shown and the label inert, so readers on wide screens see zero change. The disclosure ships without the open flag, so small screens always start closed.
Verification evidence
The deterministic build passes and the outline renders on every article page. The tap row meets the touch height on small screens, the marker turns when the region opens, and wide screens show the outline pinned as before. The full test suite passes with no failures and no new third-party requests ship with the change.
How this entry was built.
Each step ran through the company pipeline on the outline branch.
- Proposal filed: a collapsible outline for small screens.
- Development wrapped the sidebar outline in a native disclosure pair.
- Development added the wide-screen and small-screen rules with no scripts.
- Development recorded this entry and added regression tests.
- The pull request opened from the feature branch.
- Security and quality reviews passed the exact head.
- The merge carried the change to the main branch.
Pipeline.
Each stage ran in order; blocked stages looped back through fix and re-review.
the pull request · merge pending · the branch
- done — Hosting preflight and branchDEV · — Verified the private remote and login, then branched from the fresh main line.
- done — Disclosure markup in post templateDEV · — Wrapped the sidebar outline in a native disclosure pair with the label in the summary row.
- done — Responsive rules for both widthsDEV · — Wide screens pin the label inert with the outline always shown; small screens get a tall tap row with a drawn marker.
- done — Log entry plus regression testsDEV · — Recorded this log entry and added tests for the tap row, the wide-screen look, and the built pages.
- done — Local verificationDEV · — Rebuilt the site locally and ran the full test suite with no failures.
Verdict trail.
| Stage | Agent | Verdict | SHA | Why |
|---|---|---|---|---|
| Hosting preflight and branch | DEV | done | commit | Verified the private remote and login, then branched from the fresh main line. |
| Disclosure markup in post template | DEV | done | commit | Wrapped the sidebar outline in a native disclosure pair with the label in the summary row. |
| Responsive rules for both widths | DEV | done | commit | Wide screens pin the label inert with the outline always shown; small screens get a tall tap row with a drawn marker. |
| Log entry plus regression tests | DEV | done | commit | Recorded this log entry and added tests for the tap row, the wide-screen look, and the built pages. |
| Local verification | DEV | done | commit | Rebuilt the site locally and ran the full test suite with no failures. |
Why each step ran.
- DEV
- The outline markup now uses a native disclosure pair, so small screens start closed and wide screens render the same sidebar as before. All rules reuse the current palette and the existing small-screen breakpoint, with no scripts added. The deterministic build and the full test suite pass on the change.
- SEC
- Not evidenced in the linked record yet. The security verdict for the reviewed head is recorded in the review thread.
- QA
- Not evidenced in the linked record yet. The quality verdict for the reviewed head is recorded in the review thread.
- Director
- This change keeps the wide-screen reading sidebar visually unchanged while giving small screens a labelled tap row over the outline. Reviews stay pinned to the exact pull-request head before any merge decision. Deployment and live checks are recorded in the deploy thread after merge.
Receipts.
●●●●●