fix: budget dock height for answer controls and toolbar
This commit is contained in:
+14
-2
@@ -2026,11 +2026,23 @@ function DockOverlay({
|
|||||||
if (!el) return;
|
if (!el) return;
|
||||||
const measure = () => {
|
const measure = () => {
|
||||||
setSbInset(Math.round((el.offsetWidth - el.clientWidth) / 2));
|
setSbInset(Math.round((el.offsetWidth - el.clientWidth) / 2));
|
||||||
setDockMaxH(Math.max(el.clientHeight - 32, 160));
|
const block = blockRef.current;
|
||||||
|
const question = block?.querySelector<HTMLElement>("[data-dock-scroll-area]");
|
||||||
|
// The height budget belongs to the whole dock, including answer
|
||||||
|
// controls, stats, and padding. Only the question may consume the
|
||||||
|
// remaining space; otherwise the overlay grows behind the header.
|
||||||
|
const chrome = block && question ? block.offsetHeight - question.offsetHeight : 0;
|
||||||
|
setDockMaxH(Math.max(el.clientHeight - 32 - chrome, 0));
|
||||||
};
|
};
|
||||||
measure();
|
measure();
|
||||||
|
const observer = new ResizeObserver(measure);
|
||||||
|
observer.observe(el);
|
||||||
|
if (blockRef.current) observer.observe(blockRef.current);
|
||||||
window.addEventListener("resize", measure);
|
window.addEventListener("resize", measure);
|
||||||
return () => window.removeEventListener("resize", measure);
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
window.removeEventListener("resize", measure);
|
||||||
|
};
|
||||||
}, [scrollRef]);
|
}, [scrollRef]);
|
||||||
|
|
||||||
// GROWTH MUTE (owner round, 2026-10-05 — the generation churn): during a
|
// GROWTH MUTE (owner round, 2026-10-05 — the generation churn): during a
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ export function PracticeDock({ problemCallId, input, expanded, onExpand, onSubmi
|
|||||||
cards' label row — owner round, 2026-10-05) + the statement,
|
cards' label row — owner round, 2026-10-05) + the statement,
|
||||||
markdown + LaTeX rendered, capped by the measured column
|
markdown + LaTeX rendered, capped by the measured column
|
||||||
(--dock-max-h; the old fixed 40vh cut long problems short). */}
|
(--dock-max-h; the old fixed 40vh cut long problems short). */}
|
||||||
<div className="max-h-[var(--dock-max-h,40vh)] overflow-y-auto px-4 pt-3 pb-2">
|
<div data-dock-scroll-area="" className="max-h-[var(--dock-max-h,40vh)] overflow-y-auto px-4 pt-3 pb-2">
|
||||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Problem</div>
|
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">Problem</div>
|
||||||
<div className="lh-prose text-[15px]">
|
<div className="lh-prose text-[15px]">
|
||||||
<ToolContentResponse>{input.statement}</ToolContentResponse>
|
<ToolContentResponse>{input.statement}</ToolContentResponse>
|
||||||
|
|||||||
@@ -564,7 +564,7 @@ function QuestionDockForm({
|
|||||||
{/* Question area — scrolls internally if very tall; the bottom row stays put.
|
{/* Question area — scrolls internally if very tall; the bottom row stays put.
|
||||||
Capped by the measured column (--dock-max-h; the old fixed 55dvh cut
|
Capped by the measured column (--dock-max-h; the old fixed 55dvh cut
|
||||||
long questions short — owner round, 2026-10-05). */}
|
long questions short — owner round, 2026-10-05). */}
|
||||||
<div data-session-find-root="" className="max-h-[var(--dock-max-h,55dvh)] overflow-y-auto px-4 pt-3">
|
<div data-dock-scroll-area="" data-session-find-root="" className="max-h-[var(--dock-max-h,55dvh)] overflow-y-auto px-4 pt-3">
|
||||||
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
<div className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||||
{toolName === "probe"
|
{toolName === "probe"
|
||||||
? "Probe"
|
? "Probe"
|
||||||
|
|||||||
Reference in New Issue
Block a user