fix(home): centre mode homes, unclip composer dropdown, tighten hero scale#485
Merged
Conversation
…scale - Dashboard mode homes (Answer, Documents, Medication) now keep a viewport-height floor from the sm breakpoint up, so the hero block is vertically centred like the standalone services/forms/differentials homes instead of hugging the header with a large dead area below. - The content wrapper uses overflow-x-clip instead of overflow-x-hidden: hidden made it a scroll container (overflow-y computed to auto), which cut the composer's command dropdown off mid-panel and rendered a phantom inner scrollbar next to the content column. - The command dropdown is explicitly text-left (it sits inside the centred mode-home template and inherited text-center headings) and its downward list is capped to the viewport (max-h min(42dvh, 24rem)). - Shared mode-home template is tighter and consistent across every mode: smaller hero icon tile (sm 3.5rem), heading sm:text-3xl / lg:text-4xl, compact action cards (sm min-height 6.25rem, 2.75rem icon tiles), reduced section gaps, and a narrower hero composer slot. - Updated the mobile hero-sizing guard to the new compact scale (2.75rem icon, 1.5rem heading). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MYqvyoocDtvjiicK6GoLYJ
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughSummary by CodeRabbit
WalkthroughResponsive home-page sizing, positioning, and command dropdown behavior were adjusted across breakpoints. Mobile hero assertions and layout regression guards were updated, and review ledger entries were revised for PRs 461 and 485. ChangesHome layout and routed-state updates
Estimated code review effort: 2 (Simple) | ~10 minutes Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error)
✅ Passed checks (10 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
✨ Simplify code
Comment |
# Conflicts: # docs/branch-review-ledger.md
# Conflicts: # docs/branch-review-ledger.md # tests/ui-tools.spec.ts
BigSimmo
marked this pull request as ready for review
July 11, 2026 11:46
Owner
Author
|
@copilot resolve the merge conflicts on this branch. |
Copilot stopped work on behalf of
BigSimmo due to an error
July 11, 2026 11:46
# Conflicts: # docs/branch-review-ledger.md
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ab35628b05
ℹ️ 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".
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/branch-review-ledger.md`:
- Around line 47-48: Update the reviewed HEAD SHA values in the ledger entries
for PR `#461` and PR `#485` to the full 40-character commit IDs from git rev-parse,
preserving each entry’s review scope and other details.
In `@src/app/globals.css`:
- Line 1314: Make the composer width continuous across the 1024px breakpoint by
updating the clamp at src/app/globals.css lines 1314-1314 so its upper behavior
does not exceed the desktop lower bound, and aligning the desktop clamp at
src/app/globals.css lines 1531-1531 by raising or removing its 34rem minimum.
Preserve the existing responsive width behavior while eliminating the abrupt
shrink.
In `@src/components/ClinicalDashboard.tsx`:
- Around line 3335-3339: Update the centered home section’s responsive classes
near centeredModeHome so mobile layouts retain a viewport-based minimum height
below sm; remove the conflicting max-sm:min-h-0 or otherwise ensure the
section/parent provides free space for max-sm:justify-center, while preserving
the existing desktop height behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1bf80607-6cdd-4b2c-b2ff-19b35e1745b6
📒 Files selected for processing (6)
docs/branch-review-ledger.mdsrc/app/globals.csssrc/components/ClinicalDashboard.tsxsrc/components/clinical-dashboard/universal-search-command-surface.tsxsrc/components/mode-home-template.tsxtests/ui-tools.spec.ts
BigSimmo
dismissed
coderabbitai[bot]’s stale review
July 11, 2026 11:59
All three findings fixed in 96dbd03 with focused regression coverage: full ledger SHAs, continuous composer sizing at 1024px, and a mobile centering height floor.
Owner
Author
|
Resolved the final CodeRabbit set in |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
sm+, soplace-items-centerhad nothing to centre in and the hero block hugged the header with a large dead area below. The centred branch now keepssm:min-h-[calc(100dvh-11rem)], matching the standalone services/forms/differentials homes.overflow-x-hidden, which makes it a scroll container (overflow-ycomputes toauto) — the composer's command dropdown ("Recent in Answer" / "Answer actions") was clipped mid-item at the wrapper's bottom edge and a phantom inner scrollbar appeared. Switched tooverflow-x-clip, which clips horizontally without creating a scroll container.text-left(it sits inside the centred mode-home template and inheritedtext-centersection headings) and its downward list is capped tomin(42dvh, 24rem)so it can never run off-screen from a mid-page composer.ModeHomeTemplate/ModeHomeHero(used by Answer, Documents, Medication, Services, Forms, Favourites, Differentials, Tools) is tightened: smaller hero icon tile (sm3.5rem, was 4.75rem atlg), headingsm:text-3xl / lg:text-4xl(waslg:text-5xl), compact action cards (smmin-height 6.25rem, was 8.4rem atlg), reduced gaps, and a narrower hero composer slot (max 48rem, was 56rem).tests/ui-tools.spec.tsto the new compact scale (2.75rem icon, 1.5rem heading) — this test asserts all mode homes share identical hero metrics, which they still do.Before/after (1600×900,
/?mode=answerwith the composer dropdown open): the dropdown was previously cut off mid-item ~440px above the viewport bottom with a phantom scrollbar; it now renders fully, and the home block is vertically centred.Verification
npm run verify:pr-localDuring development, use
npm run verify:cheapas the faster iteration gate before the final PR-local preflight.npm run verify:uiwhen UI, routing, styling, browser behavior, reduced-motion, or forced-colors behavior changed — 129/130 Chromium tests pass. The single failure (ui-smoke.spec.ts:1891 newer routed differential context wins over an older response, an API request-count assertion) fails identically on unmodifiedmainin this environment (verified viagit stash), so it is pre-existing and unrelated to this diff. Also rannpm run lint,npm run typecheck,npm run test(1474 passed), andnpm run check:type-scale— all green.npm run verify:releasebefore release or handoff confidence claimsClinical Governance Preflight
Not applicable — this change is layout/CSS only (mode-home template, dashboard wrapper overflow, command-dropdown presentation). It does not touch ingestion, answer generation, search/ranking, source rendering, document access, privacy, production env, or clinical output.
Notes
overflow-x: clip(vshidden) is the load-bearing detail:hiddenon one axis forces the other axis toauto, creating the nested scroll container that clipped the dropdown;clipdoes not.🤖 Generated with Claude Code
https://claude.ai/code/session_01MYqvyoocDtvjiicK6GoLYJ
Generated by Claude Code