Skip to content

fix(web): composer text no longer rewraps when the expand button appears #80

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

Merged
asfires merged 1 commit into from
Sep 18, 2026
Merged

fix(web): composer text no longer rewraps when the expand button appears #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 21 additions & 6 deletions apps/web/src/components/ComposerPromptEditorTiptap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@ export interface ComposerPromptEditorHandle {
isCaretOnVisualEdge: (edge: "start" | "end") => boolean;
}

/** Present on the editor element while its content is taller than its minimum height. */
export const COMPOSER_BEYOND_MINIMUM_HEIGHT_ATTRIBUTE = "data-beyond-minimum-height";

export function isComposerPromptEditorBeyondMinimumHeight(
element: Pick<HTMLElement, "clientHeight">,
minimumHeight: number,
Expand Down Expand Up @@ -1037,22 +1040,34 @@ function ComposerPromptEditorTiptapInner(props: ComposerPromptEditorProps) {
if (!rootElement) return;

let animationFrame: number | null = null;
const measureHeight = () => {
animationFrame = null;
const readBeyondMinimumHeight = () => {
const minimumHeight = Number.parseFloat(window.getComputedStyle(rootElement).minHeight);
onBeyondMinimumHeightChange(
const beyondMinimumHeight =
Number.isFinite(minimumHeight) &&
isComposerPromptEditorBeyondMinimumHeight(rootElement, minimumHeight),
);
isComposerPromptEditorBeyondMinimumHeight(rootElement, minimumHeight);
// Styles keyed on this attribute apply in the same frame as the height
// change, without waiting for the parent to render.
rootElement.toggleAttribute(COMPOSER_BEYOND_MINIMUM_HEIGHT_ATTRIBUTE, beyondMinimumHeight);
return beyondMinimumHeight;
};
const measureHeight = () => {
animationFrame = null;
onBeyondMinimumHeightChange(readBeyondMinimumHeight());
};
const scheduleMeasurement = () => {
if (animationFrame !== null) return;
animationFrame = window.requestAnimationFrame(measureHeight);
};

measureHeight();
// Resize observers run after layout and before paint.
const resizeObserver =
typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleMeasurement);
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(() => {
readBeyondMinimumHeight();
scheduleMeasurement();
});
resizeObserver?.observe(rootElement);
const mutationObserver = new MutationObserver(scheduleMeasurement);
mutationObserver.observe(rootElement, {
Expand Down
20 changes: 12 additions & 8 deletions apps/web/src/components/chat/ChatComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2134,7 +2134,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
restoreAfterTimelineReachedEnd,
} = useComposerFocusState();
const [isComposerExpanded, setIsComposerExpanded] = useState(false);
const [isComposerExpandAvailable, setIsComposerExpandAvailable] = useState(false);
const [composerSubmissionError, setComposerSubmissionError] = useState<string | null>(null);
const [providerInputSubmissionError, setProviderInputSubmissionError] = useState<string | null>(
null,
Expand Down Expand Up @@ -3199,7 +3198,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
setComposerCursor(collapseExpandedComposerCursor(promptRef.current, promptRef.current.length));
setComposerTrigger(detectComposerTrigger(promptRef.current, promptRef.current.length));
setIsComposerExpanded(false);
setIsComposerExpandAvailable(false);
setIsDragOverComposer(false);
setIsComposerScrollCollapsed(false);
}, [draftId, activeThreadId, promptRef, setIsComposerScrollCollapsed]);
Expand Down Expand Up @@ -3387,7 +3385,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
) => {
if (shouldCollapseExpandedComposer(nextPrompt)) {
setIsComposerExpanded(false);
setIsComposerExpandAvailable(false);
}
expandComposerForEditorChange();
if (activePendingProgress?.activeQuestion && pendingUserInputs.length > 0) {
Expand Down Expand Up @@ -4056,7 +4053,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
);

const handleComposerBeyondMinimumHeightChange = useCallback((beyondMinimumHeight: boolean) => {
setIsComposerExpandAvailable(beyondMinimumHeight);
if (!beyondMinimumHeight) {
setIsComposerExpanded(false);
}
Expand Down Expand Up @@ -6533,7 +6529,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
ref={setComposerMenuAnchor}
data-chat-composer-body="true"
className={cn(
"relative px-3 pb-2 sm:px-4",
"group/composer-body relative px-3 pb-2 sm:px-4",
isComposerExpanded && "flex min-h-0 flex-1 flex-col",
"pt-3.5 sm:pt-4",
isComposerApprovalState && "pb-3 sm:pb-4",
Expand Down Expand Up @@ -6574,15 +6570,21 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
</ComposerCommandMenuLayer>
)}

{!isMobileViewport && (isComposerExpandAvailable || isComposerExpanded) ? (
{!isMobileViewport && !isComposerResting ? (
<Tooltip>
<TooltipTrigger
render={
<Button
type="button"
variant="ghost"
size="icon-xs"
className="absolute right-4 top-3.5 z-10 text-secondary-label hover:text-foreground sm:top-4"
className={cn(
"absolute right-4 top-3.5 z-10 text-secondary-label hover:text-foreground sm:top-4",
// The editor flags its own height, so the control shows in the
// same frame as the text that makes it useful.
!isComposerExpanded &&
"hidden group-has-[[data-beyond-minimum-height]]/composer-body:inline-flex",
)}
aria-label={isComposerExpanded ? "Collapse" : "Expand"}
aria-expanded={isComposerExpanded}
onPointerDown={(event) => event.preventDefault()}
Expand Down Expand Up @@ -7012,8 +7014,10 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
expanded={isComposerExpanded}
onBeyondMinimumHeightChange={handleComposerBeyondMinimumHeightChange}
className={cn(
// Always reserve the expand control's gutter so text does not
// rewrap when the control appears.
!isMobileViewport &&
(isComposerExpandAvailable || isComposerExpanded) &&
!isComposerResting &&
"composer-editor-expand-control-visible pr-8",
showMobilePendingAnswerActions && "max-sm:pb-11",
isComposerApprovalState && "min-h-8",
Expand Down
Loading