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) {
19041904 useLayoutEffect(() => {
19051905 const composerForm = composerFormRef.current;
19061906 if (!composerForm) return;
1907 const measureComposerFormWidth = () => composerForm.clientWidth;
19071908
19081909 composerFormHeightRef.current = composerForm.getBoundingClientRect().height;
19091910 setIsComposerFooterCompact(
1910 shouldUseCompactComposerFooter(composerForm.clientWidth, {
1911 shouldUseCompactComposerFooter(measureComposerFormWidth(), {
19111912 hasWideActions: composerFooterHasWideActions,
19121913 }),
19131914 );
......@@ -1917,7 +1918,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
19171918 const [entry] = entries;
19181919 if (!entry) return;
19191920
1920 const nextCompact = shouldUseCompactComposerFooter(entry.contentRect.width, {
1921 const nextCompact = shouldUseCompactComposerFooter(measureComposerFormWidth(), {
19211922 hasWideActions: composerFooterHasWideActions,
19221923 });
19231924 setIsComposerFooterCompact((previous) => (previous === nextCompact ? previous : nextCompact));