feat: align chat page title center on mobile screen

This commit is contained in:
Yidadaa
2023-06-26 01:27:36 +08:00
parent 7893693706
commit 82ec4474c2
5 changed files with 37 additions and 19 deletions

View File

@@ -3,7 +3,6 @@
.chat-input-actions {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
.chat-input-action {
display: inline-flex;
@@ -328,6 +327,12 @@
flex-direction: column;
border-top: var(--border-in-light);
box-shadow: var(--card-shadow);
.chat-input-actions {
.chat-input-action {
margin-bottom: 10px;
}
}
}
@mixin single-line {
@@ -400,6 +405,8 @@
padding: 10px 90px 10px 14px;
resize: none;
outline: none;
box-sizing: border-box;
min-height: 68px;
}
.chat-input:focus {

View File

@@ -795,6 +795,19 @@ export function Chat() {
return (
<div className={styles.chat} key={session.id}>
<div className="window-header" data-tauri-drag-region>
{isMobileScreen && (
<div className="window-actions">
<div className={"window-action-button"}>
<IconButton
icon={<ReturnIcon />}
bordered
title={Locale.Chat.Actions.ChatList}
onClick={() => navigate(Path.Home)}
/>
</div>
</div>
)}
<div className="window-header-title">
<div
className={`window-header-main-title " ${styles["chat-body-title"]}`}
@@ -807,21 +820,15 @@ export function Chat() {
</div>
</div>
<div className="window-actions">
<div className={"window-action-button" + " " + styles.mobile}>
<IconButton
icon={<ReturnIcon />}
bordered
title={Locale.Chat.Actions.ChatList}
onClick={() => navigate(Path.Home)}
/>
</div>
<div className="window-action-button">
<IconButton
icon={<RenameIcon />}
bordered
onClick={renameSession}
/>
</div>
{!isMobileScreen && (
<div className="window-action-button">
<IconButton
icon={<RenameIcon />}
bordered
onClick={renameSession}
/>
</div>
)}
<div className="window-action-button">
<IconButton
icon={<ExportIcon />}