Skip to content

Commit f31e283

Browse files
committed
fix(webapp): keep the hero's heading reachable when it outgrows the panel
justify-center on a scrolling column overflows equally in both directions, and nothing can scroll back past the origin, so at the docked panel's narrowest the heading and composer were unreachable. The child centres with m-auto, which gives its space up once there is none to spare.
1 parent 9bb1f52 commit f31e283

2 files changed

Lines changed: 27 additions & 2 deletions

File tree

apps/webapp/app/components/dashboard-agent/DashboardAgentHero.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ export function DashboardAgentHero({
1919
dismissedIds?: string[];
2020
composer?: React.ReactNode;
2121
}) {
22+
// Centred by the child's `m-auto`, not by `justify-center`: auto margins give up their space
23+
// once the content outgrows the panel, so the heading stays scrollable to.
2224
return (
23-
<div className="flex min-h-0 flex-1 flex-col items-center justify-center overflow-y-auto px-4 py-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
24-
<div className="flex w-full max-w-2xl flex-col items-center gap-5">
25+
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
26+
<div className="m-auto flex w-full max-w-2xl flex-col items-center gap-5">
2527
<div className="flex flex-col items-center gap-1.5 text-center">
2628
<Header1 className="flex items-center gap-2">
2729
<AgentMonoLogo size={22} decorative />

apps/webapp/app/components/dashboard-agent/chat-layout.test.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,27 @@ describe("chat-layout enforcement", () => {
101101
expect(source).not.toMatch(/bg-indigo-\d/);
102102
});
103103
});
104+
105+
/**
106+
* Structural guard, not behavioural proof: the webapp has no DOM test environment, so nothing
107+
* here lays the panel out or scrolls it. It asserts the class combination that loses the top
108+
* of an overflowing column is absent — `justify-center` on a scroll container centres by
109+
* distributing free space, and negative free space overflows past the scroll origin, where a
110+
* child's `m-auto` collapses to zero instead.
111+
*/
112+
describe("scrolling panes", () => {
113+
const SCROLLERS = ["DashboardAgentHero.tsx"];
114+
115+
it.each(SCROLLERS)("%s centres an overflowing column with auto margins", (file) => {
116+
const source = read(file);
117+
const scrollLines = source
118+
.split("\n")
119+
.filter((line) => line.includes("overflow-y-auto") || line.includes("overflow-auto"));
120+
expect(scrollLines.length).toBeGreaterThan(0);
121+
for (const line of scrollLines) {
122+
expect(line, line.trim()).not.toMatch(/\bjustify-center\b/);
123+
}
124+
expect(source).toMatch(/\bm-auto\b/);
125+
});
126+
});
104127
});

0 commit comments

Comments
 (0)