Skip to content

Fix mobile guided chat dock layering and reduce over-reserved bottom spacing #877

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
Copilot wants to merge 4 commits into from
+12 −12
Closed

Fix mobile guided chat dock layering and reduce over-reserved bottom spacing #877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0fade93
Initial plan
Copilot Jun 28, 2026
ec93d7f
chore: start mobile chat layout fix plan
Copilot Jun 28, 2026
47928a1
fix: pin mobile composer above subnav and reduce bottom padding
Copilot Jun 28, 2026
786537b
Resolve PR conflicts by dropping generated gap history
DHCross Jun 28, 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
14 changes: 7 additions & 7 deletions vessel/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1066,7 +1066,7 @@
const layer = HOUSE_NAME_LAYERS.find(l => l.houseNumber === chamberNumber);
if (!layer) return null;

const module = blueprint?.modules?.find((m: any) => m.id === chamberNumber);

Check failure on line 1069 in vessel/src/app/page.tsx

View workflow job for this annotation

GitHub Actions / Advisory Lint Check 

Do not assign to the variable `module`. See: https://nextjs.org/docs/messages/no-assign-module-variable
const operationalEngine = blueprint ? resolveChamberOperationalEngine(blueprint, chamberNumber) : null;
const audit: ChamberAudit | null = blueprint ? getChamberAudit(blueprint, chamberNumber) : null;

Expand Down Expand Up @@ -7454,9 +7454,9 @@
sessionActive ? "h-full" : "flex-grow",
guidedDesktopComposerDock
? "gap-0 p-4 pb-56"
: guidedMobileComposerDock
? "gap-5 px-4 pt-5 pb-[var(--guided-mobile-composer-reserve)] sm:px-5"
? "gap-5 px-4 pt-5 pb-40 sm:px-5"
: "gap-0 p-4",

Check warning on line 7459 in vessel/src/app/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Extract this nested ternary operation into an independent statement. 


See more on https://sonarcloud.io/project/issues?id=DHCross_Shipyard&issues=AZ8PBur8fcE5PvQOIXDz&open=AZ8PBur8fcE5PvQOIXDz&pullRequest=877
)}
>
{/* The reading summary intentionally does NOT render above the read in
Expand Down Expand Up @@ -7496,29 +7496,29 @@
);
};

const renderChatInput = () => {

Check failure on line 7499 in vessel/src/app/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=DHCross_Shipyard&issues=AZ8PBur8fcE5PvQOIXD0&open=AZ8PBur8fcE5PvQOIXD0&pullRequest=877
return (
<div
ref={guidedComposerAnchorRef}
data-guided-composer="true"
data-guided-reading-composer-row="true"
data-guided-mobile-composer-anchor={guidedMobileComposerDock ? "true" : undefined}
data-guided-persistent-composer="true"
className={cn(
"relative shrink-0 pointer-events-auto backdrop-blur-md",
sessionActive && "animate-chat-composer-pulse",
guidedMobileComposerDock
? "fixed inset-x-0 bottom-0 z-[80] bg-drift-canvas/95 p-0 shadow-[0_-18px_45px_rgba(2,6,14,0.72)]"
? "fixed inset-x-0 bottom-[calc(4.5rem+env(safe-area-inset-bottom,0px))] z-[80] bg-drift-canvas/95 p-0 shadow-[0_-18px_45px_rgba(2,6,14,0.72)]"
: "border-t border-slate-900 bg-[#07090e]/95 p-3",
guidedDesktopComposerDock && "shadow-[0_-12px_32px_rgba(2,6,14,0.55)]",
guidedMobileComposerDock && !sessionActive && "pb-[max(0.25rem,env(safe-area-inset-bottom))]",
)}
onMouseDown={(event) => {
const target = event.target as HTMLElement;
if (target.closest('button, a, [role="button"], textarea, input, select')) return;
chatInputRef.current?.focus();
}}
>

Check warning on line 7521 in vessel/src/app/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element. 


See more on https://sonarcloud.io/project/issues?id=DHCross_Shipyard&issues=AZ8PBur8fcE5PvQOIXD1&open=AZ8PBur8fcE5PvQOIXD1&pullRequest=877
{(voiceStatus === 'quota_exceeded' || voiceStatus === 'error') && (
<div className="mb-2 flex items-center justify-between gap-2 rounded-lg border border-amber-500/20 bg-amber-500/10 px-3 py-2 text-xs text-amber-200/90">
<span>
Expand Down Expand Up @@ -8072,7 +8072,7 @@
);
};

const renderGuidedRightPanel = () => {

Check failure on line 8075 in vessel/src/app/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 22 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=DHCross_Shipyard&issues=AZ8PBur8fcE5PvQOIXD2&open=AZ8PBur8fcE5PvQOIXD2&pullRequest=877
if (sessionActive) {
if (selectedChamber && showFullCardInActiveSession) {
const details = getChamberDetails(selectedChamber.number, displayedWheelBlueprint);
Expand All @@ -8081,7 +8081,7 @@
return (
<div className={cn(
"flex flex-col h-full overflow-y-auto p-6",
guidedMobileComposerDock && "pb-[var(--guided-mobile-composer-reserve)]",
guidedMobileComposerDock && "pb-40",
)}>
<button
onClick={() => setShowFullCardInActiveSession(false)}
Expand Down Expand Up @@ -8497,7 +8497,7 @@
);

// Guided Chat
const renderGuidedView = () => {

Check failure on line 8500 in vessel/src/app/page.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 115 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=DHCross_Shipyard&issues=AZ8PBur8fcE5PvQOIXD3&open=AZ8PBur8fcE5PvQOIXD3&pullRequest=877
const showGuidedMobileWheel = isCompactViewport && !sessionActive && !selectedChamber;
const showGuidedMobileCard = isCompactViewport && !sessionActive && selectedChamber;
const showGuidedMobileChat = isCompactViewport && sessionActive;
Expand Down Expand Up @@ -8623,7 +8623,7 @@
</div>

{/* Welcome panel body */}
<div className={cn("flex-1 min-h-0 overflow-y-auto", guidedMobileComposerDock && "pb-[var(--guided-mobile-composer-reserve)]")}>
<div className={cn("flex-1 min-h-0 overflow-y-auto", guidedMobileComposerDock && "pb-40")}>
{renderGuidedRightPanel()}
</div>

Expand Down Expand Up @@ -8666,7 +8666,7 @@
return (
<div className={cn(
"flex flex-col h-dvh w-full bg-transparent text-slate-100 overflow-y-auto p-6 relative z-10",
guidedMobileComposerDock ? "pb-[var(--guided-mobile-composer-reserve)]" : "pb-24",
guidedMobileComposerDock ? "pb-40" : "pb-24",
)}>
<div className="mb-6 flex items-center justify-between gap-3">
<button
Expand Down Expand Up @@ -8757,7 +8757,7 @@
</div>
</div>

<div className="flex flex-col flex-1 min-h-0 overflow-hidden pb-[var(--guided-mobile-composer-reserve)]">
<div className="flex flex-col flex-1 min-h-0 overflow-hidden pb-40">
<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
{latestReadingText && latestReadingId && (
<div className="shrink-0 border-b border-cyan-500/15 bg-[#07090e]/80 px-4 py-2.5 backdrop-blur-sm">
Expand Down Expand Up @@ -10051,7 +10051,7 @@
</div>
)}

{isCompactViewport && !guidedMobileComposerDock && <SurfaceMobileSubnav current="chat" />}
{isCompactViewport && <SurfaceMobileSubnav current="chat" />}

{renderGuidedView()}
{renderGuidedPersistentComposerDock()}
Expand Down
6 changes: 3 additions & 3 deletions vessel/src/test/api-smoke.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4269,12 +4269,12 @@ test('alignment corridor primes on request dispatch instead of generic loading s
assert.ok(pageSource.includes('mobileComposerDock={guidedMobileComposerDock}'));
assert.ok(pageSource.includes('data-guided-mobile-composer-anchor={guidedMobileComposerDock ? "true" : undefined}'));
assert.ok(pageSource.includes('data-guided-persistent-composer="true"'));
assert.ok(pageSource.includes('fixed inset-x-0 bottom-0 z-[80]'));
assert.ok(pageSource.includes('fixed inset-x-0 bottom-[calc(4.5rem+env(safe-area-inset-bottom,0px))] z-[80]'));
assert.ok(pageSource.includes('ResizeObserver'));
assert.ok(pageSource.includes('GUIDED_MOBILE_COMPOSER_MIN_RESERVE_PX'));
assert.ok(pageSource.includes('--guided-mobile-composer-reserve'));
assert.ok(pageSource.includes('pb-[var(--guided-mobile-composer-reserve)]'));
assert.ok(pageSource.includes('isCompactViewport && !guidedMobileComposerDock && <SurfaceMobileSubnav current="chat" />'));
assert.ok(pageSource.includes('pb-40'));
assert.ok(pageSource.includes('isCompactViewport && <SurfaceMobileSubnav current="chat" />'));
assert.ok(chatInputSource.includes('mobileComposerDock?: boolean'));
assert.ok(chatInputSource.includes('data-chatinput-mobile-dock="true"'));
assert.ok(chatInputSource.includes('z-30 border-t border-white'));
Expand Down
4 changes: 2 additions & 2 deletions vessel/src/test/mobile-chat-layout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ test('mobile chat reserves measured composer space and exposes surface shortcuts
assert.match(pageSource, /GUIDED_MOBILE_COMPOSER_MIN_RESERVE_PX/);
assert.match(pageSource, /ResizeObserver/);
assert.match(pageSource, /--guided-mobile-composer-reserve/);
assert.match(pageSource, /pb-\[var\(--guided-mobile-composer-reserve\)\]/);
assert.match(pageSource, /pb-40/);
assert.match(pageSource, /data-guided-orientation-home/);
assert.match(pageSource, /guidedMobileComposerDock \? "min-h-0" : "h-full justify-between"/);
assert.match(pageSource, /isCompactViewport && !guidedMobileComposerDock && <SurfaceMobileSubnav current="chat" \/>/);
assert.match(pageSource, /isCompactViewport && <SurfaceMobileSubnav current="chat" \/>/);
assert.match(pageSource, /SURFACE_NAV\.planner/);
assert.match(pageSource, /SURFACE_NAV\.astroPages/);
assert.match(pageSource, /SURFACE_NAV\.plans/);
Expand Down
Loading