Skip to content

fix(mobile): remove half-screen black void below short phone answers #563

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

Merged
BigSimmo merged 2 commits into from
Jul 13, 2026
+21 −4
Merged

fix(mobile): remove half-screen black void below short phone answers #563

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89ee76d
fix(mobile): remove half-screen black void below short phone answers
claude Jul 13, 2026
8ea8cf9
fix(mobile): keep short phone answers top-aligned under the question
claude Jul 13, 2026
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
25 changes: 21 additions & 4 deletions src/components/ClinicalDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3547,11 +3547,14 @@ export function ClinicalDashboard({
// bottom, so <main> reserves room for it. When that dock hides on
// scroll, reclaim the reserved strip too — otherwise the near-black
// shell background shows through as an empty band. (sm+ is inert:
// bottomSearchScrollHidden only ever goes true on phones.)
// bottomSearchScrollHidden only ever goes true on phones.) The
// reserve hugs the real dock height (follow-up scroll row + composer
// pill ≈ 6rem measured); the old 18rem reserve just painted extra
// shell background as a black band above the dock.
bottomSearchScrollHidden
? "mb-0 sm:mb-24"
: answerFollowUpSuggestions.length > 0
? "mb-[calc(18rem+env(safe-area-inset-bottom))] sm:mb-24"
? "mb-[calc(7.5rem+env(safe-area-inset-bottom))] sm:mb-24"
: "mb-[calc(5.25rem+env(safe-area-inset-bottom))] sm:mb-24"
: hasMobileBottomSearch
? bottomSearchScrollHidden
Expand Down Expand Up @@ -3584,7 +3587,12 @@ export function ClinicalDashboard({
searchMode === "answer"
? compactMobileModeHome
? "pb-4"
: "pb-32 sm:pb-36 lg:pb-40"
: // The <main> reserve already clears the fixed composer dock on
// phones, so the old large mobile bottom padding only floated a
// long answer's last line high above the dock (and padded a short
// answer's empty space further). Keep it small here; sm+/desktop
// keep the original generous padding.
"pb-4 sm:pb-36 lg:pb-40"
: hasMobileBottomSearch
? compactMobileModeHome
? "pb-4 sm:pb-10 lg:pb-12"
Expand Down Expand Up @@ -3612,7 +3620,16 @@ export function ClinicalDashboard({
"max-sm:flex max-sm:min-h-[calc(100dvh-12.5rem)] max-sm:flex-col sm:min-h-[calc(100dvh-11rem)]",
centeredModeHome && "max-sm:justify-center",
)
: "min-h-[calc(100dvh-12.5rem)] sm:min-h-[calc(100dvh-11rem)]",
: // A rendered answer is content-sized and top-aligned on phones:
// it must NOT inherit the viewport-height floor (that floor exists
// to give the centred home block room). With the floor, a short
// answer stretches the section to ~full height and you can scroll
// down into a black void; content-sized keeps the answer under the
// question with calm space below and no phantom scroll. Other
// result kinds keep the floor; sm+/desktop is unchanged.
activeModeResultKind === "answer" && answer
? "sm:min-h-[calc(100dvh-11rem)]"
: "min-h-[calc(100dvh-12.5rem)] sm:min-h-[calc(100dvh-11rem)]",
centeredModeHome || showAnswerHome
? // Phones centre the home block mid-screen, matching the
// standalone-route homes; the pop-up action surface picks
Expand Down
Loading