From 5b562c66713fe3ebfdacac833f4ce2f160b82d7c Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Thu, 20 Mar 2025 07:26:29 -0700 Subject: [PATCH] Panels: remove minSize={20} for a reflow issue When this property is set, a re-layout (force reflow) is performed by the browser even with a simple hovering of the separator. Since we may have very large walls of text/images, we need to minimize relayouts, so for now, we set a min size on the contained scrollable container instead of preventing the resize. See also this upstream issues: https://github.com/bvaughn/react-resizable-panels/issues/337 --- src/apps/chat/AppChat.tsx | 2 +- src/apps/chat/components/ChatMessageList.tsx | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/apps/chat/AppChat.tsx b/src/apps/chat/AppChat.tsx index e174704e7..ea776a775 100644 --- a/src/apps/chat/AppChat.tsx +++ b/src/apps/chat/AppChat.tsx @@ -621,7 +621,7 @@ export function AppChat() { order={idx} collapsible={chatPanes.length === 2} defaultSize={(_panesCount === 3 && idx === 1) ? 34 : Math.round(100 / _panesCount)} - minSize={20} + // minSize={20 /* IMPORTANT: this forces a reflow even on a simple on hover */} onClick={(event) => { const setFocus = chatPanes.length < 2 || !event.altKey; setFocusedPaneIndex(setFocus ? idx : -1); diff --git a/src/apps/chat/components/ChatMessageList.tsx b/src/apps/chat/components/ChatMessageList.tsx index 28c368702..3cf7a9287 100644 --- a/src/apps/chat/components/ChatMessageList.tsx +++ b/src/apps/chat/components/ChatMessageList.tsx @@ -282,6 +282,10 @@ export function ChatMessageList(props: { p: 0, ...props.sx, + // we added these after removing the minSize={20} (%) from the containing panel. + minWidth: '18rem', + // minHeight: '180px', // not need for this, as it's already an overflow scrolling container, so one can reduce it to a pixel + // fix for the double-border on the last message (one by the composer, one to the bottom of the message) // marginBottom: '-1px',