authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-03-09 11:13:09-07:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-03-09 11:57:27-07:00
log993b5785121765a56628bfd4852591f672b743af
tree6a792518880a6c5e064fba09431a1b3a24796634
parented518ef19f33bf073f48fe9b24442f063fa1bee7

Use form clientWidth for composer compact footer checks

- Measure composer width from the form element in initial and resize paths - Avoid relying on ResizeObserver contentRect width for compact footer layout decisions

1 files changed, 3 insertions(+), 2 deletions(-)

apps/web/src/components/ChatView.tsx+3-2
...@@ -1904,10 +1904,11 @@ export default function ChatView({ threadId }: ChatViewProps) {...@@ -1904,10 +1904,11 @@ export default function ChatView({ threadId }: ChatViewProps) {
1904 useLayoutEffect(() => {1904 useLayoutEffect(() => {
1905 const composerForm = composerFormRef.current;1905 const composerForm = composerFormRef.current;
1906 if (!composerForm) return;1906 if (!composerForm) return;
1907 const measureComposerFormWidth = () => composerForm.clientWidth;
19071908
1908 composerFormHeightRef.current = composerForm.getBoundingClientRect().height;1909 composerFormHeightRef.current = composerForm.getBoundingClientRect().height;
1909 setIsComposerFooterCompact(1910 setIsComposerFooterCompact(
1910 shouldUseCompactComposerFooter(composerForm.clientWidth, {1911 shouldUseCompactComposerFooter(measureComposerFormWidth(), {
1911 hasWideActions: composerFooterHasWideActions,1912 hasWideActions: composerFooterHasWideActions,
1912 }),1913 }),
1913 );1914 );
...@@ -1917,7 +1918,7 @@ export default function ChatView({ threadId }: ChatViewProps) {...@@ -1917,7 +1918,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
1917 const [entry] = entries;1918 const [entry] = entries;
1918 if (!entry) return;1919 if (!entry) return;
19191920
1920 const nextCompact = shouldUseCompactComposerFooter(entry.contentRect.width, {1921 const nextCompact = shouldUseCompactComposerFooter(measureComposerFormWidth(), {
1921 hasWideActions: composerFooterHasWideActions,1922 hasWideActions: composerFooterHasWideActions,
1922 });1923 });
1923 setIsComposerFooterCompact((previous) => (previous === nextCompact ? previous : nextCompact));1924 setIsComposerFooterCompact((previous) => (previous === nextCompact ? previous : nextCompact));