fix layout

This commit is contained in:
Red Adaya 2024-04-29 13:34:02 +08:00
parent 30b9453bcd
commit e40f93b858
4 changed files with 33 additions and 34 deletions

View File

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

View File

@ -250,15 +250,13 @@ class AIChat extends React.Component<{}, {}> {
<div className="title-string">Wave AI</div>
</div>
<OverlayScrollbarsComponent className="auxview-content" options={{ scrollbars: { autoHide: "leave" } }}>
<div className="content">
<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>
</div>
</OverlayScrollbarsComponent>
<div className="chat-input">

View File

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

View File

@ -78,11 +78,14 @@ 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="icon-container"
title="Show Keybinding Debugger"
onClick={() => this.setMode("ai")}
>
<i className="fa-sharp fa-regular fa-sparkles fa-fw" />
</div>
<div className="flex-spacer" />
<If condition={GlobalModel.isDev}>
<div
@ -100,13 +103,10 @@ class RightSideBar extends React.Component<RightSideBarProps, {}> {
>
<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>