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

@@ -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);

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',