From 7c411f3fe3da1f5e561a69e16016cb9f72e54309 Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@gmail.com>
Date: Fri, 11 Apr 2025 14:56:03 -0400
Subject: [PATCH 1/3] fix(react): allow preview panel to be fully collapsed

---
 packages/react/src/Panels/WorkspacePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Panels/WorkspacePanel.tsx b/packages/react/src/Panels/WorkspacePanel.tsx
index 1ed82a0ef..d916e8bfe 100644
--- a/packages/react/src/Panels/WorkspacePanel.tsx
+++ b/packages/react/src/Panels/WorkspacePanel.tsx
@@ -241,7 +241,7 @@ function PreviewsSection({
     <Panel
       id={hasPreviews ? 'previews-opened' : 'previews-closed'}
       defaultSize={hasPreviews ? 50 : 0}
-      minSize={10}
+      minSize={3}
       maxSize={hasPreviews ? 100 : 0}
       collapsible={!hasPreviews}
       className={classNames({

From 9bf1bf56a322e9dfe8fbaba017b19f0621522a25 Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@gmail.com>
Date: Tue, 15 Apr 2025 07:46:56 -0400
Subject: [PATCH 2/3] fix(react): calculate min size from static pixel size

---
 packages/react/src/Panels/WorkspacePanel.tsx | 25 ++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/Panels/WorkspacePanel.tsx b/packages/react/src/Panels/WorkspacePanel.tsx
index d916e8bfe..53f8749fa 100644
--- a/packages/react/src/Panels/WorkspacePanel.tsx
+++ b/packages/react/src/Panels/WorkspacePanel.tsx
@@ -51,7 +51,7 @@ export function WorkspacePanel({ tutorialStore, theme, dialog }: Props) {
   const terminalExpanded = useRef(false);
 
   return (
-    <PanelGroup className={resizePanelStyles.PanelGroup} direction="vertical">
+    <PanelGroup className={resizePanelStyles.PanelGroup} id="right-panel-group" direction="vertical">
       <DialogProvider value={dialog}>
         <EditorSection
           theme={theme}
@@ -237,11 +237,32 @@ function PreviewsSection({
     return () => unsubscribe();
   }, [storeRef]);
 
+  const MIN_SIZE_IN_PIXELS = 38;
+  const [panelMinSize, setPanelMinSize] = useState(10);
+
+  useEffect(() => {
+    const panelGroup: any = document.querySelector('[data-panel-group-id="right-panel-group"]');
+
+    if (!panelGroup) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      const height = panelGroup?.offsetHeight;
+      setPanelMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
+    });
+    observer.observe(panelGroup);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
   return (
     <Panel
       id={hasPreviews ? 'previews-opened' : 'previews-closed'}
       defaultSize={hasPreviews ? 50 : 0}
-      minSize={3}
+      minSize={panelMinSize}
       maxSize={hasPreviews ? 100 : 0}
       collapsible={!hasPreviews}
       className={classNames({

From a54374ab9662fe43c4039990f8cff290546261a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 16 Apr 2025 09:06:04 +0300
Subject: [PATCH 3/3] fix: typings

---
 packages/react/src/Panels/WorkspacePanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Panels/WorkspacePanel.tsx b/packages/react/src/Panels/WorkspacePanel.tsx
index 53f8749fa..d5097c8cb 100644
--- a/packages/react/src/Panels/WorkspacePanel.tsx
+++ b/packages/react/src/Panels/WorkspacePanel.tsx
@@ -241,7 +241,7 @@ function PreviewsSection({
   const [panelMinSize, setPanelMinSize] = useState(10);
 
   useEffect(() => {
-    const panelGroup: any = document.querySelector('[data-panel-group-id="right-panel-group"]');
+    const panelGroup = document.querySelector('div[data-panel-group-id="right-panel-group"]' as 'div');
 
     if (!panelGroup) {
       return;