[BigSimmo]

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.

^{Written for commit cf7c880. Summary will update on new commits.}

---

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.}

[codeant-ai]

🤖 CodeAnt AI — Review Status

Status	Commit	Started (UTC)	Finished (UTC)
✅ Reviewed your PR	95abc8c	Oct 11, 2026 · 09:39	09:45

[codeant-ai]

---

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

[greptile-apps]

BigSimmo has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: 11f8569b-9cdd-4deb-a54a-ce410e62f27e

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

---

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-11T09:43:20.329468Z	95abc8c	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[supabase]

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[claude]

Claude encountered an error after 2s —— View job

---

I'll analyze this and get back to you.

[qodo-code-review]

PR Summary by Qodo

Align Work page widths and label the desktop Clinical rail

✨ Enhancement 🧪 Tests 📝 Documentation 🕐 40+ Minutes

AI Description

• Align Work band titles and tabs with reading or wide page content from 1024 px.
• Add reusable wide, split and column layouts while keeping narrower content single-column.
• Label the Clinical rail and add a tablet-and-desktop header bell for eligible pages.

Diagram

graph TD
  WorkPages["Work pages"] --> WidthMarker["Width marker"] --> WorkCSS["Work CSS"] --> Band["Band and tabs"] & PageBody["Page body"]
  ClinicalRail["Clinical rail"] --> WorkCSS
  ClinicalHeader["Clinical header"] --> Bell["Needs You bell"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Set width explicitly on the Work frame

• ➕ Makes width selection local to the frame rather than dependent on a descendant selector.
• ➕ Avoids a body-wide :has() query matching an unintended wide descendant.
• ➖ Requires width decisions to be passed through shared shell or route wiring.
• ➖ Adds coordination for pages that already own their content containers.

Recommendation: Keep the PR’s declarative page markers and CSS sizing: they align the band on the server render without route-specific wiring. Frame-level width selection is worth considering if unrelated wide descendants begin to affect the band.

Files changed (23) +388 / -76

Enhancement (20) +350 / -73

work-mode.cssUnify Work widths and style desktop layouts and Clinical rail +123/-3

Unify Work widths and style desktop layouts and Clinical rail

• Introduces a page-width variable that aligns the Work band and marked page content. Adds responsive grid layouts and Clinical styling for labelled rail items.

src/app/work-mode.css

admin-kit.tsxMark wide Admin pages for band alignment +7/-1

Mark wide Admin pages for band alignment

• Adds width and padding markers to the Admin page body when its wide variant is used.

src/components/admin/admin-kit.tsx

ClinicalSidebar.tsxGive collapsed Clinical rail items visible labels +56/-45

Give collapsed Clinical rail items visible labels

• Replaces icon-only rail controls with shared pill-and-label content, including shorter labels where needed. Current and focus states retain accessible navigation semantics.

src/components/clinical-dashboard/ClinicalSidebar.tsx

master-search-header.tsxSimplify the mode pill and add a Clinical bell +10/-8

Simplify the mode pill and add a Clinical bell

• Removes the pill’s “Mode” eyebrow. Adds the Clinical bell to the header for modes that do not use the Work search controls; bell visibility is gated separately.

src/components/clinical-dashboard/master-search-header.tsx

information-page-shell.tsxDeclare the shared page container wide in Work areas +6/-1

Declare the shared page container wide in Work areas

• Marks non-bleed page containers so the Work frame can size them with the band. The width styling applies only inside a Work frame.

src/components/information-page-shell.tsx

my-day-frame.tsxDeclare My Day subpage widths +5/-1

Declare My Day subpage widths

• Marks each subpage’s own container as reading or wide according to its existing wide option, including its internal padding.

src/components/my-day/my-day-frame.tsx

my-day-page.tsxAlign the My Day home with the wide Work band +1/-1

Align the My Day home with the wide Work band

• Marks the home page body as a padded wide container for shared column sizing.

src/components/my-day/my-day-page.tsx

needs-you-button.tsxGate the Clinical bell by viewport and eligibility +40/-4

Gate the Clinical bell by viewport and eligibility

• Adds a Clinical variant to the existing bell. It renders only from 768 px when the mode, path and authentication state allow it.

src/components/needs-you/needs-you-button.tsx

notifications-page.tsxKeep Notifications at reading width +1/-1

Keep Notifications at reading width

• Marks the Notifications content as a padded reading page so its band follows that width.

src/components/needs-you/notifications-page.tsx

staff-work-header-controls.tsxExpose a bell-only Clinical header control +10/-0

Expose a bell-only Clinical header control

• Adds a Clinical header export that renders the existing Needs You bell without the Work search button.

src/components/needs-you/staff-work-header-controls.tsx

open-shifts-alerts-page.tsxMark Open Shifts alerts as wide +1/-1

Mark Open Shifts alerts as wide

• Adds the wide page marker so the Work band follows the alerts page’s declared kind.

src/components/open-shifts/open-shifts-alerts-page.tsx

open-shifts-browse-page.tsxMark Open Shifts browse as wide +1/-1

Mark Open Shifts browse as wide

• Adds the wide page marker to the browse container for Work band alignment.

src/components/open-shifts/open-shifts-browse-page.tsx

open-shifts-log-page.tsxMark the shift log page as wide +1/-1

Mark the shift log page as wide

• Adds the wide page marker to the shift log container for Work band alignment.

src/components/open-shifts/open-shifts-log-page.tsx

open-shifts-mine-page.tsxMark My Shifts as wide +1/-1

Mark My Shifts as wide

• Adds the wide page marker to the My Shifts container for Work band alignment.

src/components/open-shifts/open-shifts-mine-page.tsx

open-shifts-post-page.tsxMark the post-a-shift page as wide +1/-1

Mark the post-a-shift page as wide

• Adds the wide page marker to the post-a-shift container for Work band alignment.

src/components/open-shifts/open-shifts-post-page.tsx

open-shifts-posted-page.tsxMark posted shifts as wide +1/-1

Mark posted shifts as wide

• Adds the wide page marker to the posted-shifts container for Work band alignment.

src/components/open-shifts/open-shifts-posted-page.tsx

open-shifts-posted-shift-page.tsxMark posted-shift details as wide +1/-1

Mark posted-shift details as wide

• Adds the wide page marker to the posted-shift detail container for Work band alignment.

src/components/open-shifts/open-shifts-posted-shift-page.tsx

work-desktop-layout.tsxAdd reusable wide, split and column Work layouts +71/-0

Add reusable wide, split and column Work layouts

• Introduces WorkWidePage, WorkSplit and WorkColumns for area pages. They declare wide width and provide layouts that become multi-column from 1024 px.

src/components/work-frame/work-desktop-layout.tsx

work-profile-page.tsxAlign Work Profile with the wide band +1/-1

Align Work Profile with the wide band

• Marks the Work Profile content container as a padded wide page.

src/components/work-profile/work-profile-page.tsx

homes.tsDefine eligible Clinical bell modes +12/-0

Define eligible Clinical bell modes

• Adds a visibility rule for Clinical pages that excludes Work modes, First Nations and missing paths.

src/lib/needs-you/homes.ts

Tests (2) +14 / -3

mode-pages-sheet-classes.test.tsAdjust pill typography assertion +3/-3

Adjust pill typography assertion

• Updates the expected number of semibold pill lines after removal of the “Mode” eyebrow.

tests/mode-pages-sheet-classes.test.ts

needs-you-homes.test.tsCover Clinical bell eligibility +11/-0

Cover Clinical bell eligibility

• Tests allowed Clinical modes and exclusions for First Nations, Work modes and missing paths.

tests/needs-you-homes.test.ts

Documentation (1) +24 / -0

DECISIONS.mdRecord the desktop and tablet shell decision +24/-0

Record the desktop and tablet shell decision

• Documents the 1024 px content breakpoint, reading and wide widths, and Clinical header and rail choices. It also records the decision to keep the side rail at 768 px.

docs/design-system/DECISIONS.md

[codeant-ai]

🏁 CodeAnt Quality Gate Results

Commit: cf7c8807
Scan Time: 2026-10-11 10:38:42 UTC

✅ Overall Status: PASSED

Quality Gate Details

Quality Gate	Status	Details
Secrets	✅ PASSED	0 secrets found
Duplicate Code	✅ PASSED	0.0% duplicated
SAST	✅ PASSED	No security issues
Bugs	✅ PASSED	Rating S: No bugs
IAC	✅ PASSED	No IAC issues

View Full Results

[codspeed]

Merging this PR will improve performance by 10.51%

⚠️ 2 benchmarks spent significant time in system calls

System calls cannot be consistently instrumented, so they are not included in the measure, which understates the real cost. Please switch to the Walltime instrument to accurately measure system calls.

Measurement and system calls

• catalog-search: rankCatalogRecords 400 records
• chunking: buildChunks 12 pages

ℹ️ 1 benchmark has no flame graph

The flamegraph could not be generated because too much time was spent in runtime internals, making the visualization not useful for performance analysis.

• medication-entities: medicationEntityMatchesInText

⚡ 1 improved benchmark
✅ 7 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡ ℹ️	medication-entities: medicationEntityMatchesInText	4.7 ms	4.2 ms	+10.51%

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing claude/desktop-tablet-shell-05l4cq (cf7c880) with main (36c1ba3)}

[gitar-bot]

Gitar has auto-approved this PR (configure)

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 95abc8c5d6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. On-call readers lose narrow layout ✓ Resolved

Description

InformationPageShell marks every non-bleed container as wide, even when the caller requests
width="narrow". In framed work pages such as On Call Now and Roster Settings, that marker selects
the 64rem desktop column for the band’s title and tabs instead of the intended 45rem reading column.

Code

src/components/information-page-shell.tsx[70]

+      <div className={cn(container, gap && "grid grid-cols-[minmax(0,1fr)] gap-5 sm:gap-6")} data-page-width="wide">

Relevance

●●● Strong

The PR explicitly defines narrow pages as 45rem; unconditional wide metadata contradicts that stated
layout contract.

PR-#2715
PR-#3417

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

On Call Now and Roster Settings both request a narrow shell, but the shell’s unconditional wide
marker matches the work-frame CSS rule that sets --work-col to 64rem, which the band uses. The
existing max-w-reading token is also 64rem, so changing the marker to reading alone would not
establish a 45rem work-area measure.

src/components/information-page-shell.tsx[65-72]
src/components/on-call/on-call-call-now-page.tsx[317-319]
src/app/work-mode.css[193-208]
src/components/roster/roster-settings-page.tsx[232-235]
src/components/information-page-shell.tsx[55-73]
src/app/work-mode.css[189-209]
src/app/work-mode.css[398-403]
src/app/globals.css[143-149]
Skill: design-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`InformationPageShell` marks narrow reading pages as wide, causing framed work pages to expand their band titles and tabs to 64rem on desktop instead of using the intended 45rem reading column.

## Fix Focus Areas
- src/components/information-page-shell.tsx[55-73]
- src/app/work-mode.css[189-209]

## Recommended Fix
Apply the wide marker only to genuinely wide shells. Mark narrow shells as reading pages in work areas and constrain their work-area content to the 45rem reading column, while preserving the 64rem behavior for wide shells. Verify that the work band follows the selected page width.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Shift forms stretch across desktop ✓ Resolved

Description

OpenShiftsPostPage marks its max-w-reading container as wide although its main content is a
form. Inside a work frame at 1024px or wider, the new width selector overrides that reading maximum
with the 64rem column.

Code

src/components/open-shifts/open-shifts-post-page.tsx[122]

+    <div className="mx-auto w-full max-w-reading pb-10" data-mode-identity="open-shifts" data-page-width="wide">

Relevance

●●● Strong

The form retains reading-width classes but wide metadata overrides them, conflicting with the
documented reading-page intent.

PR-#2715
PR-#2455

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The design-review skill calls for consistent layout sizing. The changed wide marker conflicts with
this form's reading-width class, and the new work-frame selector gives the marker precedence on
desktop.

src/components/open-shifts/open-shifts-post-page.tsx[121-140]
src/app/work-mode.css[193-208]
Skill: design-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The posted-shift form is declared wide despite using a reading-width container, so desktop work-frame styling expands the form.
## Fix Focus Areas
- src/components/open-shifts/open-shifts-post-page.tsx[121-129]
- src/app/work-mode.css[193-208]
## Recommended Fix
Classify this form page as reading rather than wide, and check the other newly marked Open Shifts pages so forms retain reading width while genuinely wide views can expand.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Phones download an unused bell bundle ✗ Dismissed

Description

MasterSearchHeader mounts the dynamic ClinicalHeaderBell for non-work-search modes without
checking viewport width. On phones, that mount loads the button module and its notification
stylesheet before NeedsYouButton checks the screen width and returns null, adding a download for
a control phones never show.

Code

src/components/clinical-dashboard/master-search-header.tsx[R2860-2862]

+          {appModeHasWorkSearch(selectedAppMode.id) ? null : (
+            <ClinicalHeaderBell modeId={selectedAppMode.id} clinical />
+          )}

Relevance

●●● Strong

Recent accepted findings favor gating lazy clinical modules and avoiding unnecessary phone-side
loading.

PR-#3373
PR-#2180

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The header renders the dynamic import for non-work-search modes without a viewport guard; its module
imports notification CSS at top level. The button's viewport check runs only after that module loads
and returns null below 768px.

src/components/clinical-dashboard/master-search-header.tsx[165-167]
src/components/clinical-dashboard/master-search-header.tsx[2860-2862]
src/components/needs-you/needs-you-button.tsx[1-3]
src/components/needs-you/needs-you-button.tsx[24-42]
src/components/needs-you/needs-you-button.tsx[89-94]
src/components/needs-you/needs-you-button.tsx[124-124]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Clinical header loads the bell module and notification CSS on phones even though the bell renders only from tablet width upward.
## Fix Focus Areas
- src/components/clinical-dashboard/master-search-header.tsx[165-167]
- src/components/clinical-dashboard/master-search-header.tsx[2860-2862]
- src/components/needs-you/needs-you-button.tsx[24-42]
## Recommended Fix
Gate mounting the dynamic Clinical bell wrapper behind a hydration-safe 768px viewport check, so phones do not initiate its import. Keep the visibility and authentication checks in `NeedsYouButton`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

View resolved (3)

4. Clinical pages load work search code ✓ Resolved

Description

The shared loadHeaderControls import used by ClinicalHeaderBell loads the entire
staff-work-header-controls module, whose top-level imports include WorkSearchButton.
Consequently, every non-work Clinical page that mounts the bell also downloads and evaluates the AI
Search button and its work-search dependencies even though that page renders only the bell.

Code

src/components/clinical-dashboard/master-search-header.tsx[R163-165]

+const loadHeaderControls = () => import("@/components/needs-you/staff-work-header-controls");
+const StaffWorkHeaderControls = dynamic(() => loadHeaderControls().then((m) => m.StaffWorkHeaderControls));
+const ClinicalHeaderBell = dynamic(() => loadHeaderControls().then((m) => m.ClinicalHeaderBell));

Relevance

●●● Strong

Accepted performance precedent favors preventing unrelated Clinical pages from loading Work Search
dependencies.

PR-#3373
PR-#3221

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed shared loader imports staff-work-header-controls for both dynamic components. That
module statically imports WorkSearchButton, and WorkSearchButton statically imports the
work-search sheet wrapper and glyph, while the Clinical bell is rendered on non-work Clinical modes.

src/components/clinical-dashboard/master-search-header.tsx[163-165]
src/components/clinical-dashboard/master-search-header.tsx[2858-2858]
src/components/needs-you/staff-work-header-controls.tsx[3-20]
src/components/work-search/work-search-button.tsx[3-13]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`ClinicalHeaderBell` and `StaffWorkHeaderControls` share one lazy import, so loading the Clinical bell also loads the work header module and its `WorkSearchButton` dependencies. This defeats the stated goal that Clinical loads only the bell and adds unnecessary work-search code to every non-work Clinical page.

## Fix Focus Areas
- src/components/clinical-dashboard/master-search-header.tsx[163-165]
- src/components/needs-you/staff-work-header-controls.tsx[3-20]
- src/components/work-search/work-search-button.tsx[3-13]

## Recommended Fix
Move `ClinicalHeaderBell` into a separate module that imports only `NeedsYouButton`, or otherwise create separate lazy loaders for the Clinical bell and the staff work controls. Keep the work-search imports reachable only from `StaffWorkHeaderControls`, then verify that non-work Clinical routes do not include the work-search button and its dependencies in their loaded chunk.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

5. Phone subpages lose their menu button ✗ Dismissed

Description

WorkPageBack portals a .work-frame-back link into the header, which triggers the existing rule
that hides the phone menu button. On the newly converted Roster, Teaching, CPD and Open shifts
subpages, the two-pane exception is disabled and the side rail starts at tablet width, so phone
readers no longer have the menu button that remained available beside the former in-page back link.

Code

src/components/work-frame/work-page-back.tsx[46]

+    className: "universal-header-icon-control work-frame-back",

Relevance

●●● Strong

Accepted precedents prioritize preserving mobile navigation when responsive shell changes hide or
obstruct menu controls.

PR-#3355
PR-#3365

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The new link uses .work-frame-back inside #universal-header-leading; the header CSS hides its
menu whenever that slot has a child. The exception requires the two-pane setting, which is currently
false, while the Clinical rail is tablet-and-up. The converted pages previously rendered their Back
links in-page rather than in this slot.

src/components/work-frame/work-page-back.tsx[44-62]
src/app/work-mode.css[778-793]
src/lib/work-frame/side-menu-choice.ts[1-4]
src/components/clinical-dashboard/master-search-header.tsx[2596-2613]
src/components/clinical-dashboard/ClinicalSidebar.tsx[1308-1314]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Moving these pages’ Back links into the header causes the header’s existing CSS to hide the phone menu. Preserve both controls on phones without adding a second Back link.
## Fix Focus Areas
- src/components/work-frame/work-page-back.tsx[44-61]
- src/app/work-mode.css[778-793]
## Recommended Fix
Identify page-owned Back links in the header and keep the phone menu visible beside them. Check the resulting header spacing at narrow phone widths.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

6. High-contrast rail lacks an active outline ✓ Resolved

Description

The new Clinical rail styling marks selected links with aria-current="page", but the shared
forced-colors outline rule matches only aria-current="true". When forced colors suppress the
Clinical accent background, the selected Clinical pill does not receive the outline that identifies
the current item in the Work rail.

Code

src/app/work-mode.css[R2833-2836]

+.clinical-rail__item[aria-current="page"] .work-rail__pill,
+.clinical-rail__item[data-current="true"] .work-rail__pill {
+  background: var(--mode-identity-soft);
+  color: var(--mode-identity);

Relevance

●●● Strong

Recent forced-colors precedents accept restoring visible system-color indicators when normal styling
disappears.

PR-#3443
PR-#3455

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Clinical links retain aria-current="page" after conversion to the shared pill styling, and the new
Clinical selector relies on that value. The forced-colors rule supplies a Highlight outline only to
Work items with aria-current="true", leaving the Clinical pills unmatched.

src/components/clinical-dashboard/ClinicalSidebar.tsx[1177-1183]
src/app/work-mode.css[2833-2843]
src/app/work-mode.css[2867-2873]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Clinical rail's selected-item styling uses `aria-current="page"`, which the existing forced-colors outline rule does not match.

## Fix Focus Areas
- src/app/work-mode.css[2833-2843]
- src/app/work-mode.css[2867-2873]

## Recommended Fix
Extend the forced-colors rule to outline Clinical pills marked with `aria-current="page"` or the selected button's `data-current="true"`, while retaining the Work rail selector.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Context sources

✅ Compliance rules (platform): 9 rules

✅ Skills: 4 invoked

  accessibility-review

  frontend-architecture-review

  performance-review

  testing-review

✅ Cross-repo context — repo relationships

✅ REVIEW.md

Review mode: Auto: 🚀 Fast: Localized bell behavior change with limited, well-covered runtime impact.

Tip of the day

💡 Did you know, you can tweak Display settings with a live preview to see your comment before it ships

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Previous reviews

Review updated until commit cf7c880 🚀 Fast

Results up to commit 95abc8c ⚖️ Balanced

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Shift forms stretch across desktop ✓ Resolved

Description

OpenShiftsPostPage marks its max-w-reading container as wide although its main content is a
form. Inside a work frame at 1024px or wider, the new width selector overrides that reading maximum
with the 64rem column.

Code

src/components/open-shifts/open-shifts-post-page.tsx[122]

+    <div className="mx-auto w-full max-w-reading pb-10" data-mode-identity="open-shifts" data-page-width="wide">

Relevance

●●● Strong

The form retains reading-width classes but wide metadata overrides them, conflicting with the
documented reading-page intent.

PR-#2715
PR-#2455

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The design-review skill calls for consistent layout sizing. The changed wide marker conflicts with
this form's reading-width class, and the new work-frame selector gives the marker precedence on
desktop.

src/components/open-shifts/open-shifts-post-page.tsx[121-140]
src/app/work-mode.css[193-208]
Skill: design-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The posted-shift form is declared wide despite using a reading-width container, so desktop work-frame styling expands the form.
## Fix Focus Areas
- src/components/open-shifts/open-shifts-post-page.tsx[121-129]
- src/app/work-mode.css[193-208]
## Recommended Fix
Classify this form page as reading rather than wide, and check the other newly marked Open Shifts pages so forms retain reading width while genuinely wide views can expand.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. On-call readers lose narrow layout ✓ Resolved

Description

InformationPageShell marks every non-bleed container as wide, even when the caller requests
width="narrow". In framed work pages such as On Call Now and Roster Settings, that marker selects
the 64rem desktop column for the band’s title and tabs instead of the intended 45rem reading column.

Code

src/components/information-page-shell.tsx[70]

+      <div className={cn(container, gap && "grid grid-cols-[minmax(0,1fr)] gap-5 sm:gap-6")} data-page-width="wide">

Relevance

●●● Strong

The PR explicitly defines narrow pages as 45rem; unconditional wide metadata contradicts that stated
layout contract.

PR-#2715
PR-#3417

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

On Call Now and Roster Settings both request a narrow shell, but the shell’s unconditional wide
marker matches the work-frame CSS rule that sets --work-col to 64rem, which the band uses. The
existing max-w-reading token is also 64rem, so changing the marker to reading alone would not
establish a 45rem work-area measure.

src/components/information-page-shell.tsx[65-72]
src/components/on-call/on-call-call-now-page.tsx[317-319]
src/app/work-mode.css[193-208]
src/components/roster/roster-settings-page.tsx[232-235]
src/components/information-page-shell.tsx[55-73]
src/app/work-mode.css[189-209]
src/app/work-mode.css[398-403]
src/app/globals.css[143-149]
Skill: design-review

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`InformationPageShell` marks narrow reading pages as wide, causing framed work pages to expand their band titles and tabs to 64rem on desktop instead of using the intended 45rem reading column.

## Fix Focus Areas
- src/components/information-page-shell.tsx[55-73]
- src/app/work-mode.css[189-209]

## Recommended Fix
Apply the wide marker only to genuinely wide shells. Mark narrow shells as reading pages in work areas and constrain their work-area content to the 45rem reading column, while preserving the 64rem behavior for wide shells. Verify that the work band follows the selected page width.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. High-contrast rail lacks an active outline ✓ Resolved

Description

The new Clinical rail styling marks selected links with aria-current="page", but the shared
forced-colors outline rule matches only aria-current="true". When forced colors suppress the
Clinical accent background, the selected Clinical pill does not receive the outline that identifies
the current item in the Work rail.

Code

src/app/work-mode.css[R2833-2836]

+.clinical-rail__item[aria-current="page"] .work-rail__pill,
+.clinical-rail__item[data-current="true"] .work-rail__pill {
+  background: var(--mode-identity-soft);
+  color: var(--mode-identity);

Relevance

●●● Strong

Recent forced-colors precedents accept restoring visible system-color indicators when normal styling
disappears.

PR-#3443
PR-#3455

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Clinical links retain aria-current="page" after conversion to the shared pill styling, and the new
Clinical selector relies on that value. The forced-colors rule supplies a Highlight outline only to
Work items with aria-current="true", leaving the Clinical pills unmatched.

src/components/clinical-dashboard/ClinicalSidebar.tsx[1177-1183]
src/app/work-mode.css[2833-2843]
src/app/work-mode.css[2867-2873]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Clinical rail's selected-item styling uses `aria-current="page"`, which the existing forced-colors outline rule does not match.

## Fix Focus Areas
- src/app/work-mode.css[2833-2843]
- src/app/work-mode.css[2867-2873]

## Recommended Fix
Extend the forced-colors rule to outline Clinical pills marked with `aria-current="page"` or the selected button's `data-current="true"`, while retaining the Work rail selector.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit 0d4a2ee ⚖️ Balanced

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Phone subpages lose their menu button ✗ Dismissed

Description

WorkPageBack portals a .work-frame-back link into the header, which triggers the existing rule
that hides the phone menu button. On the newly converted Roster, Teaching, CPD and Open shifts
subpages, the two-pane exception is disabled and the side rail starts at tablet width, so phone
readers no longer have the menu button that remained available beside the former in-page back link.

Code

src/components/work-frame/work-page-back.tsx[46]

+    className: "universal-header-icon-control work-frame-back",

Relevance

●●● Strong

Accepted precedents prioritize preserving mobile navigation when responsive shell changes hide or
obstruct menu controls.

PR-#3355
PR-#3365

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The new link uses .work-frame-back inside #universal-header-leading; the header CSS hides its
menu whenever that slot has a child. The exception requires the two-pane setting, which is currently
false, while the Clinical rail is tablet-and-up. The converted pages previously rendered their Back
links in-page rather than in this slot.

src/components/work-frame/work-page-back.tsx[44-62]
src/app/work-mode.css[778-793]
src/lib/work-frame/side-menu-choice.ts[1-4]
src/components/clinical-dashboard/master-search-header.tsx[2596-2613]
src/components/clinical-dashboard/ClinicalSidebar.tsx[1308-1314]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Moving these pages’ Back links into the header causes the header’s existing CSS to hide the phone menu. Preserve both controls on phones without adding a second Back link.
## Fix Focus Areas
- src/components/work-frame/work-page-back.tsx[44-61]
- src/app/work-mode.css[778-793]
## Recommended Fix
Identify page-owned Back links in the header and keep the phone menu visible beside them. Check the resulting header spacing at narrow phone widths.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit bd3f90b 🚀 Fast

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Clinical pages load work search code ✓ Resolved

Description

The shared loadHeaderControls import used by ClinicalHeaderBell loads the entire
staff-work-header-controls module, whose top-level imports include WorkSearchButton.
Consequently, every non-work Clinical page that mounts the bell also downloads and evaluates the AI
Search button and its work-search dependencies even though that page renders only the bell.

Code

src/components/clinical-dashboard/master-search-header.tsx[R163-165]

+const loadHeaderControls = () => import("@/components/needs-you/staff-work-header-controls");
+const StaffWorkHeaderControls = dynamic(() => loadHeaderControls().then((m) => m.StaffWorkHeaderControls));
+const ClinicalHeaderBell = dynamic(() => loadHeaderControls().then((m) => m.ClinicalHeaderBell));

Relevance

●●● Strong

Accepted performance precedent favors preventing unrelated Clinical pages from loading Work Search
dependencies.

PR-#3373
PR-#3221

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changed shared loader imports staff-work-header-controls for both dynamic components. That
module statically imports WorkSearchButton, and WorkSearchButton statically imports the
work-search sheet wrapper and glyph, while the Clinical bell is rendered on non-work Clinical modes.

src/components/clinical-dashboard/master-search-header.tsx[163-165]
src/components/clinical-dashboard/master-search-header.tsx[2858-2858]
src/components/needs-you/staff-work-header-controls.tsx[3-20]
src/components/work-search/work-search-button.tsx[3-13]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`ClinicalHeaderBell` and `StaffWorkHeaderControls` share one lazy import, so loading the Clinical bell also loads the work header module and its `WorkSearchButton` dependencies. This defeats the stated goal that Clinical loads only the bell and adds unnecessary work-search code to every non-work Clinical page.

## Fix Focus Areas
- src/components/clinical-dashboard/master-search-header.tsx[163-165]
- src/components/needs-you/staff-work-header-controls.tsx[3-20]
- src/components/work-search/work-search-button.tsx[3-13]

## Recommended Fix
Move `ClinicalHeaderBell` into a separate module that imports only `NeedsYouButton`, or otherwise create separate lazy loaders for the Clinical bell and the staff work controls. Keep the work-search imports reachable only from `StaffWorkHeaderControls`, then verify that non-work Clinical routes do not include the work-search button and its dependencies in their loaded chunk.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

Results up to commit dd948dc ⚖️ Balanced

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

No findings for this group

No findings for this group

No findings for this group

Resolved findings

1. Phones download an unused bell bundle ✗ Dismissed

Description

MasterSearchHeader mounts the dynamic ClinicalHeaderBell for non-work-search modes without
checking viewport width. On phones, that mount loads the button module and its notification
stylesheet before NeedsYouButton checks the screen width and returns null, adding a download for
a control phones never show.

Code

src/components/clinical-dashboard/master-search-header.tsx[R2860-2862]

+          {appModeHasWorkSearch(selectedAppMode.id) ? null : (
+            <ClinicalHeaderBell modeId={selectedAppMode.id} clinical />
+          )}

Relevance

●●● Strong

Recent accepted findings favor gating lazy clinical modules and avoiding unnecessary phone-side
loading.

PR-#3373
PR-#2180

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The header renders the dynamic import for non-work-search modes without a viewport guard; its module
imports notification CSS at top level. The button's viewport check runs only after that module loads
and returns null below 768px.

src/components/clinical-dashboard/master-search-header.tsx[165-167]
src/components/clinical-dashboard/master-search-header.tsx[2860-2862]
src/components/needs-you/needs-you-button.tsx[1-3]
src/components/needs-you/needs-you-button.tsx[24-42]
src/components/needs-you/needs-you-button.tsx[89-94]
src/components/needs-you/needs-you-button.tsx[124-124]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The Clinical header loads the bell module and notification CSS on phones even though the bell renders only from tablet width upward.
## Fix Focus Areas
- src/components/clinical-dashboard/master-search-header.tsx[165-167]
- src/components/clinical-dashboard/master-search-header.tsx[2860-2862]
- src/components/needs-you/needs-you-button.tsx[24-42]
## Recommended Fix
Gate mounting the dynamic Clinical bell wrapper behind a hydration-safe 768px viewport check, so phones do not initiate its import. Keep the visibility and authentication checks in `NeedsYouButton`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Qodo Fixer

✅ Committed (3) · ☑ Fixed (3)

Commits pushed directly to this PR — no separate fix PR opened.

Process — 3 fixed

• ☑ Fixed: On-call readers lose narrow layout
• ☑ Fixed: Shift forms stretch across desktop
• ☑ Fixed: High-contrast rail lacks an active outline

[codeant-ai]

CodeAnt Nitpicks

6 code suggestions

1. When a landscape safe-area inset exceeds 1rem, this fixed 2rem allowance is smaller than the actual side padding, narrowing the band content and breaking alignment with page cards.

Css layout issue · src/app/work-mode.css:401

---

2. When the current Clinical item is hovered, this equally specific later rule overrides its active tint, hiding the pill’s current-page highlight.

Css layout issue · src/app/work-mode.css:2845-2847

---

3. This loads the shared controls module on clinical pages; its static WorkSearchButton import pulls AI Search code into the clinical chunk even though that control is never rendered.

Performance · src/components/clinical-dashboard/master-search-header.tsx:166-168

---

4. At desktop widths this marks a data-entry form as wide, so the frame expands it to 64rem and stretches its fields beyond the 45rem reading layout.

Logic error · src/components/open-shifts/open-shifts-log-page.tsx:114

---

5. At desktop widths this marks a data-entry form as wide, so the frame expands it to 64rem and stretches its fields beyond the 45rem reading layout.

Logic error · src/components/open-shifts/open-shifts-post-page.tsx:122

---

6. The wide marker appears only when a shift is ready; loading and error branches keep the shell at 45rem, then readiness expands it to 64rem and shifts the band.

Css layout issue · src/components/open-shifts/open-shifts-posted-shift-page.tsx:125

[codeant-ai]

CodeAnt PR Risk: Medium Risk

• The PR needs attention before merging.
• The open-shifts log page is marked wide despite the stated 45rem rule for forms, so the desktop frame can expand it to 64rem.

Assessed commit: 3c96cbf06dc1

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code review by qodo was updated up to the latest commit 0d4a2ee

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code review by qodo was updated up to the latest commit bd3f90b

[gitar-bot]

Gitar has auto-approved this PR (configure)

[qodo-code-review]

Code review by qodo was updated up to the latest commit dd948dc

[gitar-bot]

Gitar has auto-approved this PR (configure)

[gitar-bot]

Code Review ✅ Approved 1 closed / 1 findings

🟡 Medium risk · Adding a Clinical bell that reads notifications while signed in and changing widths across Work pages could trigger unexpected feed reads or disrupt layouts.

Aligns Work page widths so band titles and tabs line up with content, and updates desktop Clinical rail labels, pill, and bell placement. No open issues found. The open-shift log form and Alerts settings finding was closed without a fix and remains at its current width.

Auto-approved: No blocking issues found.
Please see Auto-approve Docs for details on setting custom approval criteria.

✅ 1 closed

Closed: Bug: Open-shift log form and Alerts settings marked wide, not reading

📄 src/components/open-shifts/open-shifts-log-page.tsx 📄 src/components/open-shifts/open-shifts-alerts-page.tsx:21 📄 src/components/open-shifts/open-shifts-post-page.tsx:122 📄 src/app/work-mode.css:193-203
The PR's rule is that forms and settings are reading pages (45rem). Commit 1a0cddf applied it to the Post form, but the Log a shift form (open-shifts-log-page.tsx) and the Alerts settings page (open-shifts-alerts-page.tsx) still carry data-page-width="wide". From 1024px, body:has(... [data-page-width="wide"]) sets --work-col to 64rem, and the more specific [data-work-frame] [data-page-width] rule overrides max-w-reading. As a result, the single-column paste box and fields on the log form, and the alerts toggles, stretch to 1024px, and the band widens with them. The fix is to mark both containers data-page-width="reading", as was done for the Post form.

Review coverage

🤖 Auto-approval Approved

📋 Rules No rules evaluated

🧪 Functional validation Not enabled · Set up

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Counting what did not apply, without listing it.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[qodo-code-review]

Code review by qodo was updated up to the latest commit cf7c880