Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
13 changes: 8 additions & 5 deletions .fork/customizations.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -674,11 +674,14 @@
absolutely positioned overlay outside the editor's scroll box — wraps and
paints straight through the 48px box, and stably so (the overlay never
changes the observed editor height, so the latch cannot rescue it). A
narrow viewport resolves tall regardless. States the designs do not draw
also resolve tall: an approval request, a pending user-input question, and
the plan follow-up banner all own the box's internals and carry their own
action rows. Attachments deliberately do not force tall — attachment cards
render as a full-width band above the inline row.
narrow viewport resolves tall regardless. On desktop slim the same overlay
still outruns a short editor column: the placeholder truncates with an
ellipsis (nowrap on the Lexical sibling, overflow-hidden on the prompt
column) rather than wrapping under the inline pills. States the designs do
not draw also resolve tall: an approval request, a pending user-input
question, and the plan follow-up banner all own the box's internals and
carry their own action rows. Attachments deliberately do not force tall —
attachment cards render as a full-width band above the inline row.
The control row renders in every density, including collapsed; only its
left half is conditional. The run controls are gated on a pending approval
— they moved out of the box, which upstream unmounted wholesale during
Expand Down
13 changes: 13 additions & 0 deletions apps/web/src/__fork_guards__/forkComposerShell.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,19 @@ describe("fork guard: fork-composer-shell", () => {
).toBe("tall");
});

it("truncates the slim-shell placeholder instead of letting it wrap under the pills", () => {
// Same absolute-overlay failure mode as the phone case, just on a desktop
// slim row whose editor column is still narrower than the long empty-state
// hint. Truncate on one line; do not apply nowrap to the editor itself.
expect(theme).toMatch(
/\[data-fork-composer-density="slim"\][\s\S]{0,200}\[data-testid="composer-editor"\]\s*~\s*div[\s\S]{0,160}text-overflow:\s*ellipsis/u,
);
expect(theme).toMatch(
/\[data-fork-composer-density="slim"\][\s\S]{0,200}\[data-testid="composer-editor"\]\s*~\s*div[\s\S]{0,160}white-space:\s*nowrap/u,
);
expect(chatComposer).toMatch(/isComposerSlim && "overflow-hidden"/u);
Comment thread
NoahHendrickson marked this conversation as resolved.
Resolved
});

it("keeps the branch controls reachable while collapsed, and gates modes on approval", () => {
// Two upstream behaviours the control row has to preserve. Upstream showed
// BranchToolbar while collapsed (gated on showComposerContextStrip alone),
Expand Down
8 changes: 7 additions & 1 deletion apps/web/src/components/chat/ChatComposer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2732,7 +2732,13 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)

{/* fork:begin fork-composer-shell — see .fork/customizations.yaml#fork-composer-shell */}
<div className={cn("flex min-w-0", isComposerSlim ? "items-center gap-6" : "flex-col")}>
<div ref={attachPromptElement} className="relative min-w-0 flex-1">
{/* overflow-hidden on slim: the absolute placeholder can still paint
past the editor column into the inline pills if something misses
the ellipsis rule; clip at the column edge. */}
<div
ref={attachPromptElement}
className={cn("relative min-w-0 flex-1", isComposerSlim && "overflow-hidden")}
Comment thread
NoahHendrickson marked this conversation as resolved.
Resolved
>
{/* fork:end fork-composer-shell */}
<ComposerPromptEditor
editorRef={composerEditorRef}
Expand Down
15 changes: 15 additions & 0 deletions apps/web/src/theme.custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,21 @@
}
}

/* Slim shell: the empty-state hint is an absolute overlay outside the editor's
scroll box. Wrapping never grows the observed editor height, so the wrap latch
cannot flip the shell to tall — and the second line paints straight through the
inline model pill and send button. Truncate on one line instead. The spacer
sibling is empty, so nowrap is a no-op there. Tall keeps wrapping: the prompt
owns the full width and the box has room. */
:root[data-fork="noahhendrickson-t3code"]
[data-fork-composer-density="slim"]
[data-testid="composer-editor"]
~ div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* The in-box pills and the control row below it share one 24px ghost treatment:
12px medium type, a 12px glyph, and a full pill. The designs draw this type at
10px; 12px is the fork's own call, and it matches the prompt beside it.
Expand Down
Loading