From e40f93b85840f6975caaa103c84dd9db4ea381c4 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Mon, 29 Apr 2024 13:34:02 +0800
Subject: [PATCH] fix layout

---
 src/app/sidebar/aichat.less |  5 ++--
 src/app/sidebar/aichat.tsx  | 14 +++++------
 src/app/sidebar/right.less  |  2 +-
 src/app/sidebar/right.tsx   | 46 ++++++++++++++++++-------------------
 4 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/app/sidebar/aichat.less b/src/app/sidebar/aichat.less
index 48d29d7a1..834b81ad9 100644
--- a/src/app/sidebar/aichat.less
+++ b/src/app/sidebar/aichat.less
@@ -7,7 +7,7 @@
     .titlebar {
         background-color: var(--app-panel-bg-color);
         color: var(--term-blue);
-        padding: 6px 10px 6px 10px;
+        padding: 6px 15px;
         display: flex;
         flex: 0 0 auto;
         flex-direction: row;
@@ -28,7 +28,8 @@
         display: flex;
         flex-flow: column nowrap;
         flex: 1;
-        padding: var(--termpad) calc(var(--termpad) * 2) var(--termpad) calc(var(--termpad) * 3 - 1px);
+        padding: 0 15px;
+        margin-bottom: 0;
 
         .chat-window {
             display: flex;
diff --git a/src/app/sidebar/aichat.tsx b/src/app/sidebar/aichat.tsx
index 5ba555bf6..ca6b4fb6b 100644
--- a/src/app/sidebar/aichat.tsx
+++ b/src/app/sidebar/aichat.tsx
@@ -250,14 +250,12 @@ class AIChat extends React.Component<{}, {}> {
                     <div className="title-string">Wave AI</div>
                 </div>
 
-                <OverlayScrollbarsComponent className="auxview-content" options={{ scrollbars: { autoHide: "leave" } }}>
-                    <div className="content">
-                        <div className="chat-window" ref={this.chatWindowScrollRef}>
-                            <div className="filler"></div>
-                            <For each="chitem" index="idx" of={chatMessageItems}>
-                                {this.renderChatMessage(chitem)}
-                            </For>
-                        </div>
+                <OverlayScrollbarsComponent className="content" options={{ scrollbars: { autoHide: "leave" } }}>
+                    <div className="chat-window" ref={this.chatWindowScrollRef}>
+                        <div className="filler"></div>
+                        <For each="chitem" index="idx" of={chatMessageItems}>
+                            {this.renderChatMessage(chitem)}
+                        </For>
                     </div>
                 </OverlayScrollbarsComponent>
 
diff --git a/src/app/sidebar/right.less b/src/app/sidebar/right.less
index cc35854f4..f92873383 100644
--- a/src/app/sidebar/right.less
+++ b/src/app/sidebar/right.less
@@ -23,7 +23,7 @@
             height: 39px;
             display: flex;
             align-items: center;
-            justify-content: flex-end;
+            justify-content: space-between;
             padding: 0 5px;
             border-bottom: 1px solid var(--app-border-color);
         }
diff --git a/src/app/sidebar/right.tsx b/src/app/sidebar/right.tsx
index 28afc0c36..d614ae628 100644
--- a/src/app/sidebar/right.tsx
+++ b/src/app/sidebar/right.tsx
@@ -78,35 +78,35 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
                 {(toggleCollapse) => (
                     <React.Fragment>
                         <div className="header">
-                            <Button className="secondary ghost" onClick={toggleCollapse}>
-                                <i className="fa-sharp fa-regular fa-xmark"></i>
-                            </Button>
-                        </div>
-                        <div className="rsb-modes">
-                            <div className="flex-spacer" />
-                            <If condition={GlobalModel.isDev}>
+                            <div className="rsb-modes">
                                 <div
                                     className="icon-container"
                                     title="Show Keybinding Debugger"
-                                    onClick={() => this.setMode("keybind")}
+                                    onClick={() => this.setMode("ai")}
                                 >
-                                    <i className="fa-fw fa-sharp fa-keyboard fa-solid" />
+                                    <i className="fa-sharp fa-regular fa-sparkles fa-fw" />
+                                </div>
+                                <div className="flex-spacer" />
+                                <If condition={GlobalModel.isDev}>
+                                    <div
+                                        className="icon-container"
+                                        title="Show Keybinding Debugger"
+                                        onClick={() => this.setMode("keybind")}
+                                    >
+                                        <i className="fa-fw fa-sharp fa-keyboard fa-solid" />
+                                    </div>
+                                </If>
+                                <div
+                                    className="icon-container"
+                                    title="Show Keybinding Debugger"
+                                    onClick={() => this.setMode("wavebook")}
+                                >
+                                    <i className="fa-sharp fa-solid fa-book-sparkles"></i>
                                 </div>
-                            </If>
-                            <div
-                                className="icon-container"
-                                title="Show Keybinding Debugger"
-                                onClick={() => this.setMode("wavebook")}
-                            >
-                                <i className="fa-sharp fa-solid fa-book-sparkles"></i>
-                            </div>
-                            <div
-                                className="icon-container"
-                                title="Show Keybinding Debugger"
-                                onClick={() => this.setMode("ai")}
-                            >
-                                <i className="fa-sharp fa-regular fa-sparkles fa-fw" />
                             </div>
+                            <Button className="secondary ghost" onClick={toggleCollapse}>
+                                <i className="fa-sharp fa-regular fa-xmark"></i>
+                            </Button>
                         </div>
                         <If condition={this.mode.get() == "keybind"}>
                             <KeybindDevPane></KeybindDevPane>