cynarAI/evOo-local
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(web): increase transcript bottom padding when task pill is pinned above composer

Browse Source
This commit is contained in:
cynarAI 2026-10-22 16:36:44 +02:00
parent 95061c648f
commit 9a753e9adb
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/pages/shell/transcript.tsx
View File

@ -68,6 +68,7 @@ import {
ChartBlockView,
ChoiceCard,
ExternalLinksBar,
extractActivePlanState,
McpApprovalCard,
PlanCard,
} from "./message-cards";
@ -296,6 +297,10 @@ export const Transcript = memo(function Transcript({
}
return { absorbed, stepsByPlanMsgId };
}, [coalescedMessages, runNarration.steps]);
const hasActivePlanPill = useMemo(
() => Boolean(extractActivePlanState(coalescedMessages, running, runStartedAt)),
[coalescedMessages, running, runStartedAt],
);
const trailingAnsweringBots = useMemo(() => {
const liveProgressMessages = coalescedMessages.filter(
(message) => !runNarration.hidden.has(message.id) && message.id.startsWith("progress:"),
@ -538,7 +543,7 @@ export const Transcript = memo(function Transcript({
useLayoutEffect(() => {
if (following.current) snapToEnd();
}, [messages, running, snapToEnd]);
}, [messages, running, hasActivePlanPill, snapToEnd]);
// A question the bot waits on can scroll out of view; offer a way back to it instead of the arrow.
const [askOffscreen, setAskOffscreen] = useState(false);
@ -666,8 +671,8 @@ export const Transcript = memo(function Transcript({
) : null}
<div
className={`mx-auto flex w-full flex-1 flex-col ${
encounterMode ? "max-w-2xl gap-3 pb-28 md:pb-32" : "max-w-4xl gap-6 pb-28 md:pb-32"
}`}
encounterMode ? "max-w-2xl gap-3" : "max-w-4xl gap-6"
} ${hasActivePlanPill ? "pb-48 md:pb-52" : "pb-28 md:pb-32"}`}
>
{coalescedMessages.map((message) => {
if (runNarration.hidden.has(message.id)) return null;
@ -923,7 +928,9 @@ export const Transcript = memo(function Transcript({
aria-hidden={!showJumpToLatest}
tabIndex={showJumpToLatest ? 0 : -1}
onClick={jumpToLatest}
className={`absolute bottom-24 left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border md:bottom-28 motion-reduce:transition-none ${
className={`absolute left-1/2 z-20 grid h-9 w-9 -translate-x-1/2 place-items-center rounded-full border border-border bg-muted/95 text-foreground/75 shadow-md backdrop-blur transition-[opacity,transform,background-color] duration-200 ease-[cubic-bezier(.22,1,.36,1)] hover:bg-border motion-reduce:transition-none ${
hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
} ${
showJumpToLatest
? "translate-y-0 opacity-100"
: "pointer-events-none translate-y-2 opacity-0"
@ -936,7 +943,9 @@ export const Transcript = memo(function Transcript({
type="button"
data-testid="needs-you-jump"
onClick={jumpToAsk}
className="absolute bottom-24 left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border md:bottom-28"
className={`absolute left-1/2 z-20 inline-flex h-9 -translate-x-1/2 items-center gap-1.5 rounded-full border border-border bg-muted/95 px-3.5 text-ui-body-sm font-medium text-foreground shadow-md backdrop-blur hover:bg-border ${
hasActivePlanPill ? "bottom-44 md:bottom-48" : "bottom-24 md:bottom-28"
}`}
>
<span aria-hidden="true" className="size-2 rounded-full bg-warning" />
{t`Needs you`}