Commit 48b71f0eb323d08c8fcadfe54adf34becb2984da | the-knife

author	maria <maria@kuuro.net> 2026-10-08 18:44:05-03:00
committer	GitHub <noreply@github.com> 2026-10-08 18:44:05-03:00
log	48b71f0eb323d08c8fcadfe54adf34becb2984da
tree	9348f14ba95ce97e55a0a3679045101e05718b59
parent	7b57b723d3b7490b50fffbd99fe89c6aa98fae1f
signature	Signed by PGP key B5690EEEBB952194

fix(web): collapsed composer reserves room for wide send actions (#17016)

1 files changed, 20 insertions(+), 11 deletions(-)

apps
- web
  - src
    components
    chat
    ChatComposer.tsx

apps/web/src/components/chat/ChatComposer.tsx+20-11

 @@ -5220,6 +5220,19 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   useLayoutEffect(() => {
     onRestingChange(isComposerResting);
   }, [isComposerResting, onRestingChange]);
+  // The resting footer floats over the prompt row, so the row reserves its
+  // measured width. Wide actions like the compact-before-send chip vary too much for a fixed inset.
+  const [restingActionsElement, setRestingActionsElement] = useState<HTMLDivElement | null>(null);
+  const [restingActionsWidth, setRestingActionsWidth] = useState<number | null>(null);
+  useLayoutEffect(() => {
+    if (!isComposerResting || !restingActionsElement) return;
+    const measure = () => setRestingActionsWidth(restingActionsElement.offsetWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(restingActionsElement);
+    return () => observer.disconnect();
+  }, [isComposerResting, restingActionsElement]);
   const restingImagePreviewCounts = getRestingComposerImagePreviewCounts(
     standaloneComposerImages.length,
   );
 @@ -7376,17 +7389,12 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 )}
               <div
-                className={cn(
+                className={cn("relative", isComposerResting && "flex min-w-0 items-center gap-1")}
-                  "relative",
+                style={
-                  isComposerResting && "flex min-w-0 items-center gap-1",
+                  isComposerResting && restingActionsWidth !== null
-                  isComposerResting &&
+                    ? { paddingRight: `calc(${restingActionsWidth}px + 1rem)` }
-                    ((settings.contextWindowMeterEnabled && activeContextWindow) ||
+                    : undefined
-                    reserveContextWindowMeter
+                }
-                      ? "pr-28"
-                      : showComposerAttachAction
-                        ? "pr-20"
-                        : "pr-12"),
-                )}
               >
                 {previewFile ? (
                   <Dialog
 @@ -7565,6 +7573,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                 {/* Right side: send / stop button */}
                 <div
+                  ref={setRestingActionsElement}
                   data-chat-composer-actions="right"
                   data-chat-composer-transition-actions="true"
                   data-chat-composer-primary-actions-compact={