From 9af363dbdb02fab6f746c2a46f2b8839e2e319e9 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 20:41:06 +0800
Subject: [PATCH] feat(playground): adjust layout sizes for panels and improve
 result display structure

---
 src/app/playground/layout.tsx                 | 10 +++++-----
 src/app/playground/layout/terminal/result.tsx | 16 +++++++++-------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app/playground/layout.tsx b/src/app/playground/layout.tsx
index 49117dc..c587016 100644
--- a/src/app/playground/layout.tsx
+++ b/src/app/playground/layout.tsx
@@ -18,17 +18,13 @@ export default function PlaygroundLayout() {
         <ResizablePanelGroup direction="horizontal">
           <ResizablePanel defaultSize={25}>One</ResizablePanel>
           <ResizableHandle className="bg-[#3e4452]" />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize={50}>
             <ResizablePanelGroup direction="vertical">
               <ResizablePanel defaultSize={75}>
                 <ResizablePanelGroup direction="horizontal">
                   <ResizablePanel defaultSize={75}>
                     <EditorPanel />
                   </ResizablePanel>
-                  <ResizableHandle className="bg-[#3e4452]" />
-                  <ResizablePanel defaultSize={25}>
-                    <Chat />
-                  </ResizablePanel>
                 </ResizablePanelGroup>
               </ResizablePanel>
               <ResizableHandle className="bg-[#3e4452]" />
@@ -37,6 +33,10 @@ export default function PlaygroundLayout() {
               </ResizablePanel>
             </ResizablePanelGroup>
           </ResizablePanel>
+          <ResizableHandle className="bg-[#3e4452]" />
+          <ResizablePanel defaultSize={25}>
+            <Chat />
+          </ResizablePanel>
         </ResizablePanelGroup>
       </div>
     </div>
diff --git a/src/app/playground/layout/terminal/result.tsx b/src/app/playground/layout/terminal/result.tsx
index dbc890b..805956b 100644
--- a/src/app/playground/layout/terminal/result.tsx
+++ b/src/app/playground/layout/terminal/result.tsx
@@ -12,14 +12,16 @@ export default function ResultPage() {
   return (
     <>
       {type && message && (
-        <ScrollArea className="h-full bg-[#272B33]">
+        <>
           <Message type={type} message={message} />
-          {output && (
-            <SyntaxHighlighter language="bash" style={oneDark}>
-              {output}
-            </SyntaxHighlighter>
-          )}
-        </ScrollArea>
+          <ScrollArea className="h-full bg-[#272B33]">
+            {output && (
+              <SyntaxHighlighter language="bash" style={oneDark}>
+                {output}
+              </SyntaxHighlighter>
+            )}
+          </ScrollArea>
+        </>
       )}
     </>
   );