Skip to content

Fix mobile edge-to-edge content when chrome hides #900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
BigSimmo wants to merge 1 commit into from
+10 −1
Closed

Fix mobile edge-to-edge content when chrome hides #900

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/components/clinical-dashboard/global-search-shell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ function GlobalStandaloneSearchShellClient({
const reservesFloatingComposer = shouldShowSearchComposer && !isStandaloneModeHome;
// Standalone mode homes portal the composer into the hero (in-flow at every
// width), so phones need no bottom-dock clearance there.
const mobileComposerReserve = !shouldShowSearchComposer
const visibleMobileComposerReserve = !shouldShowSearchComposer
? "2rem"
: isStandaloneModeHome
? "2rem"
Expand All @@ -271,6 +271,15 @@ function GlobalStandaloneSearchShellClient({
: useCompactBottomSearch
? "calc(5.5rem + env(safe-area-inset-bottom))"
: "calc(9rem + env(safe-area-inset-bottom))";
// When phone chrome hides on downward scroll, release the large bottom
// composer reserve as well. Otherwise long content reaches the end of the
// internal scrollport while a toolbar-sized blank band remains between the
// page and Safari's collapsed address bar. Keep only a small safe-area
// breathing room so the site content, not the background, fills the revealed
// edge-to-edge viewport.
const mobileComposerReserve = phoneScrollHide.hidden
? "max(0.75rem, env(safe-area-inset-bottom))"
: visibleMobileComposerReserve;
Comment on lines +280 to +282

@coderabbitai coderabbitai Bot Jul 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

Base the reserve on effective composer visibility.

phoneScrollHide.hidden can remain true while MasterSearchHeader keeps the header/composer visible for an open menu or focused control (master-search-header.tsx lines 308-330). This drops the main content reserve to 0.75rem while visible chrome can still overlay the bottom of #main-content. Use the same effective hidden state, or expose that state from MasterSearchHeader, and add a regression test for reopening/focusing chrome after scroll-hide.

🤖 Prompt for 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.

In `@src/components/clinical-dashboard/global-search-shell.tsx` around lines 280 -
282, Update the mobileComposerReserve calculation in the global search shell to
use the effective composer visibility state rather than phoneScrollHide.hidden
alone. Reuse or expose the state from MasterSearchHeader so open menus and
focused controls retain visibleMobileComposerReserve, and add a regression test
covering chrome reopening or focus after scroll-hide.

@BigSimmo BigSimmo Jul 18, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codex fix

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary

Testing

  • ✅ git diff --check
  • ❌ npm run test:focused -- --files src/components/clinical-dashboard/global-search-shell.tsx,src/components/clinical-dashboard/master-search-header.tsx,tests/clinical-dashboard-merge-artifacts.test.ts — focused runner rejected direct test/config paths and instructed running the full unit suite.
  • ⚠️ npm run test — blocked by environment setup: missing node_modules/vitest/vitest.mjs; local runtime reported Node.js v20.20.2.

View task →

@coderabbitai coderabbitai Bot Jul 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Skipped: comment is from another GitHub bot.

Comment on lines +280 to +282

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve the reserve when the bottom dock stays visible

On phone differential search results with the compare add-on active, MasterSearchHeader intentionally keeps the bottom dock visible because mobileBottomSearchAddonSlotId disables bottom hide-on-scroll, but this new reserve switch still shrinks #main-content padding whenever only the header hides. After a downward scroll on /differentials results, the visible compare/dock can overlap the final cards; the existing geometry check in tests/ui-tools.spec.ts that scrolls results and asserts lastResultBottom <= dockTop would catch this. Gate the reserve reduction on the same condition that actually hides the bottom composer, not just phoneScrollHide.hidden.

Useful? React with 👍 / 👎.

@BigSimmo BigSimmo Jul 18, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@codex fix

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary

Testing

  • ✅ npm run workflow:flightplan -- --write-evidence --files src/components/clinical-dashboard/global-search-shell.tsx,src/components/clinical-dashboard/master-search-header.tsx,tests/ui-tools.spec.ts
  • ✅ git diff --check
  • ⚠️ npm run test:focused -- --files src/components/clinical-dashboard/global-search-shell.tsx,src/components/clinical-dashboard/master-search-header.tsx,tests/ui-tools.spec.ts — helper failed closed because the changed file list includes tests/ui-tools.spec.ts and instructed running npm run test.
  • ⚠️ npm run test — blocked by missing local dependency node_modules/vitest/vitest.mjs under Node 20.20.2.
  • ⚠️ npm run ensure — blocked because the project requires Node 24.x, but the local runtime is Node 20.20.2.
  • ⚠️ npm run typecheck — blocked by missing local dependency node_modules/typescript/bin/tsc under Node 20.20.2.

View task →


useEffect(() => {
// Re-derive the mode and query from the URL, but only when the search string
Expand Down
Loading