Desktop shell: one width per page kind, labelled Clinical rail

Merged
BI
1mo ago
+564-180

User description

Requested by Josh · project thread

Summary

Before: on desktop, Work pages used three different widths (720, 1024 and 1280 px) while the band's title always sat in a 720 px column, so on Swaps, Team, On Call, Admin Today, Teaching and Open shifts the title did not line up with the cards. Desktop Clinical had an icon-only rail, a "Mode" label in the pill and no bell.

After: each Work page is either a reading page (45rem) or a wide page (64rem from 1024 px), and the band's title and tabs follow the page, so they line up. Below 1024 px every page stays the single phone column (tablet rule: phone at 768, desktop at 1024). Desktop and tablet Clinical show a name under every rail icon in the work rail's style, the pill reads like the phone's and Work's (no "Mode" label), and the bell sits in the header. Phones are unchanged.

How: data-page-width on page containers and a body:has() rule in work-mode.css set one --work-col for band and body, so the server render is already right. The shared page shell marks itself wide inside a work area. New work-desktop-layout.tsx gives area pages WorkWidePage, WorkSplit (list beside record, sticky list from 1024 px) and WorkColumns. Recorded as C9 in docs/design-system/DECISIONS.md.

  • Areas touched: Personal practice, App experience, Design system

Verification

  • Checks run: npm run test:focused over the changed files: Test Files 138 passed (138), Tests 1796 passed (1796). tsc --noEmit clean; eslint clean on changed files.
  • Measured title and content edges on 113 Work pages at 1440 px in a local Chromium before and after; remaining mismatches are horizontally scrolling chip rows, not columns.
  • Browser suites left to CI.

Risk and rollout

  • Risk: layout only. Pages that were 1280 px wide are now 1024 px; pages between 768 and 1023 px wide now cap at the 720 px phone column.
  • Rollback: revert this PR.
  • Provider or production effects: None.

Notes

  • No clinical wording, no migration, no public/sw.js, no RAG ranking files.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KHkbt7EPd1iS6ryTjtnzq2

Generated by Claude Code

Summary by cubic

Work pages now use one column width per page kind so the band's title and tabs line up with the page content, and desktop Clinical matches Work's shell: labelled rail icons, no "Mode" eyebrow, and a bell that reads the feed on idle only for signed-in readers.

  • Work pages declare a reading (45rem) or wide (64rem) column; below 1024px every page stays the phone column. WorkWidePage, WorkSplit and WorkColumns open the wide layouts from 1024px, while posting and log forms keep reading width.
  • Inside a work area the shared shell — narrow included — counts as wide, since max-w-reading already is the wide column.
  • Pages whose real parent isn't their first tab (Team staffing, Sick for tomorrow, Term evidence folder, CPD Home, CV, Open shifts Log) draw Back in the top bar's left button instead of a second link under the band.
  • Tablets and desktop Clinical label every rail icon in Work's rail style, drop the pill's "Mode" label, and show the bell in the header; the clinical bell loads as its own lazy chunk, apart from AI Search's controls. Phones and First Nations pages are unchanged.

Rollout

  • Pages that were 1280px wide on desktop are now 1024px; layout only, no data or provider effects.

CodeAnt-AI Description

Align work pages and clarify Clinical navigation

What Changed

  • Work pages use a reading or wide content width on desktop, with the page title and tabs aligned to the content; wide pages open up from 1024px while narrower screens stay single-column.
  • Clinical navigation now shows labels beneath rail icons, and the mode selector no longer shows a “Mode” label.
  • The Clinical header now shows the notification bell on tablets and desktop, except in First Nations.

Impact

✅ Aligned work-page titles and content
✅ Clearer Clinical rail navigation
✅ Clinical notifications visible on tablets and desktop

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

Summary by Gitar

  • One way back:
    • Page back links now render in the top bar via WorkPageBack, not as a second link under the band
    • Roster Sick, Term folder, Open shifts sub-pages and CPD feature pages use it, with history-aware back where applicable

This will update automatically on new commits.