VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change layout styles, move BoardPage to separate file

Browse Source
This commit is contained in:
marlon-erler
2024-07-23 12:43:30 +02:00
parent 12947f8063
commit 3aae049106
7 changed files with 277 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+22 -20
View File
@@ -238,9 +238,9 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #main, #chat-page > div > #main,
#chat-page > div > #main > div, #chat-page > div > #main > div,
#chat-page > div > #main > div > .pane, #chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane > .toolbar, #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex; display: flex;
} }
#chat-page > div { #chat-page > div {
@@ -254,33 +254,35 @@ body[showing-chat] #chat-page-wrapper {
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
} }
#chat-page #main > div, #chat-page #main > div,
#chat-page > div > #main > div > .pane, #chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane {
flex-direction: column; flex-direction: column;
scroll-snap-align: center; scroll-snap-align: center;
min-width: 100%; min-width: 100%;
} }
#chat-page > div > #main > div > .pane:not(.side), #chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
#chat-page > div > #main > div > .pane:not(.side) .content { #chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
animation: slide-up var(--animation-duration); animation: slide-up var(--animation-duration);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane-wrapper {
min-width: unset; min-width: unset;
} }
#chat-page > div > #main > div > .pane.side { #chat-page > div > #main > div > .pane-wrapper.side {
max-width: 18rem; max-width: 18rem;
} }
} }
#chat-page > div > #main > div > .pane:not(:last-child) { #chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
padding: var(--content-padding); padding: var(--content-padding);
@@ -291,11 +293,11 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column; flex-direction: column;
} }
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
align-items: center; align-items: center;
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -319,7 +321,7 @@ body[showing-chat] #chat-page-wrapper {
flex-direction: column; flex-direction: column;
} }
#chat-page > div > #ribbon button, #chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
max-width: var(--control-height); max-width: var(--control-height);
@@ -329,18 +331,18 @@ body[showing-chat] #chat-page-wrapper {
justify-content: center; justify-content: center;
} }
#chat-page > div > #ribbon button.ribbon-button, #chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
min-height: unset; min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
} }
#chat-page > div > #ribbon button.ribbon-button > .icon, #chat-page > div > #ribbon button.ribbon-button > .icon,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon {
font-size: 1.1rem; font-size: 1.1rem;
} }
#chat-page > div > #ribbon > span { #chat-page > div > #ribbon > span {
width: 100%; width: 100%;
} }
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
height: var(--ribbon-size); height: var(--ribbon-size);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
overflow-y: hidden; overflow-y: hidden;
@@ -348,10 +350,10 @@ body[showing-chat] #chat-page-wrapper {
padding: 0px; padding: 0px;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .toolbar > span { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
padding-left: var(--content-padding); padding-left: var(--content-padding);
} }
#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
dist/index.js
Vendored
+13 -8
View File
@@ -1820,7 +1820,7 @@
scrollDownIfApplicable scrollDownIfApplicable
); );
setTimeout(() => scrollDown(), 100); setTimeout(() => scrollDown(), 100);
return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement( return /* @__PURE__ */ createElement("div", { id: "message-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messagesHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, messageContainer, /* @__PURE__ */ createElement("div", { id: "composer" }, /* @__PURE__ */ createElement("div", { class: "content-width-constraint" }, /* @__PURE__ */ createElement("div", { class: "input-width-constraint" }, /* @__PURE__ */ createElement(
"input", "input",
{ {
"bind:value": messagePageViewModel.composingMessage, "bind:value": messagePageViewModel.composingMessage,
@@ -1836,7 +1836,7 @@
"toggle:disabled": messagePageViewModel.cannotSendMessage "toggle:disabled": messagePageViewModel.cannotSendMessage
}, },
/* @__PURE__ */ createElement("span", { class: "icon" }, "send") /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
))))))); ))))))));
} }
// src/View/Components/dangerousActionButton.tsx // src/View/Components/dangerousActionButton.tsx
@@ -1894,7 +1894,7 @@
settingsPageViewModel.removeSecondaryChannel(secondaryChannel); settingsPageViewModel.removeSecondaryChannel(secondaryChannel);
}); });
}; };
return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement( return /* @__PURE__ */ createElement("div", { id: "settings-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.settingsHeadline)), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.settings.primaryChannelLabel), /* @__PURE__ */ createElement(
"input", "input",
{ {
"bind:value": settingsPageViewModel.primaryChannelInput, "bind:value": settingsPageViewModel.primaryChannelInput,
@@ -1981,7 +1981,7 @@
translations.chatPage.settings.deleteChatButton, translations.chatPage.settings.deleteChatButton,
"chat_error", "chat_error",
settingsPageViewModel.remove settingsPageViewModel.remove
))))); ))))));
} }
// src/View/Components/boardEntry.tsx // src/View/Components/boardEntry.tsx
@@ -2003,6 +2003,11 @@
return BoardEntry(boardViewModel); return BoardEntry(boardViewModel);
}; };
// src/View/ChatPages/boardPage.tsx
function BoardPage(boardViewModel) {
return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }));
}
// src/View/ChatPages/taskPage.tsx // src/View/ChatPages/taskPage.tsx
function TaskPage(taskPageViewModel) { function TaskPage(taskPageViewModel) {
taskPageViewModel.loadData(); taskPageViewModel.loadData();
@@ -2012,14 +2017,14 @@
const selectedBoard = taskPageViewModel.selectedBoard.value; const selectedBoard = taskPageViewModel.selectedBoard.value;
if (selectedBoard == void 0) { if (selectedBoard == void 0) {
return [ return [
/* @__PURE__ */ createElement("div", { class: "content align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected)) /* @__PURE__ */ createElement("div", { class: "pane align-center justify-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.task.noBoardSelected))
]; ];
} else { } else {
return [/* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })]; return BoardPage(selectedBoard);
} }
} }
); );
return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { "set:color": taskPageViewModel.chatViewModel.displayedColor, class: "pane side background" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement( return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
"input", "input",
{ {
"bind:value": taskPageViewModel.newBoardNameInput, "bind:value": taskPageViewModel.newBoardNameInput,
@@ -2045,7 +2050,7 @@
BoardInfoToEntry BoardInfoToEntry
] ]
} }
))), /* @__PURE__ */ createElement("div", { class: "pane", "children:set": paneContent })); )))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }));
} }
// src/View/chatPage.tsx // src/View/chatPage.tsx
src/View/ChatPages/boardPage.tsx
+10
View File
@@ -0,0 +1,10 @@
import * as React from "bloatless-react";
import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
export function BoardPage(boardViewModel: BoardViewModel) {
return <div class="pane">
<div class="toolbar"></div>
<div class="content"></div>
</div>;
}
src/View/ChatPages/messagePage.tsx
+2
View File
@@ -37,6 +37,7 @@ export function MessagePage(messagePageViewModel: MessagePageViewModel) {
return ( return (
<div id="message-page"> <div id="message-page">
<div class="pane-wrapper">
<div class="pane"> <div class="pane">
<div class="toolbar"> <div class="toolbar">
<span>{translations.chatPage.message.messagesHeadline}</span> <span>{translations.chatPage.message.messagesHeadline}</span>
@@ -69,5 +70,6 @@ export function MessagePage(messagePageViewModel: MessagePageViewModel) {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
src/View/ChatPages/settingsPage.tsx
+12 -4
View File
@@ -19,6 +19,7 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
return ( return (
<div id="settings-page"> <div id="settings-page">
<div class="pane-wrapper">
<div class="pane"> <div class="pane">
<div class="toolbar"> <div class="toolbar">
<span>{translations.chatPage.settings.settingsHeadline}</span> <span>{translations.chatPage.settings.settingsHeadline}</span>
@@ -27,7 +28,9 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
<label class="tile flex-no"> <label class="tile flex-no">
<span class="icon">forum</span> <span class="icon">forum</span>
<div> <div>
<span>{translations.chatPage.settings.primaryChannelLabel}</span> <span>
{translations.chatPage.settings.primaryChannelLabel}
</span>
<input <input
bind:value={settingsPageViewModel.primaryChannelInput} bind:value={settingsPageViewModel.primaryChannelInput}
on:enter={settingsPageViewModel.setPrimaryChannel} on:enter={settingsPageViewModel.setPrimaryChannel}
@@ -38,7 +41,8 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
<button <button
class="width-50" class="width-50"
aria-label={ aria-label={
translations.chatPage.settings.setPrimaryChannelButtonAudioLabel translations.chatPage.settings
.setPrimaryChannelButtonAudioLabel
} }
on:click={settingsPageViewModel.setPrimaryChannel} on:click={settingsPageViewModel.setPrimaryChannel}
toggle:disabled={settingsPageViewModel.cannotSetPrimaryChannel} toggle:disabled={settingsPageViewModel.cannotSetPrimaryChannel}
@@ -68,7 +72,9 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
.addSecondaryChannelButtonAudioLabel .addSecondaryChannelButtonAudioLabel
} }
on:click={settingsPageViewModel.addSecondaryChannel} on:click={settingsPageViewModel.addSecondaryChannel}
toggle:disabled={settingsPageViewModel.cannotAddSecondaryChannel} toggle:disabled={
settingsPageViewModel.cannotAddSecondaryChannel
}
> >
<span class="icon">add</span> <span class="icon">add</span>
</button> </button>
@@ -99,7 +105,8 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
<button <button
class="width-50" class="width-50"
aria-label={ aria-label={
translations.chatPage.settings.setEncryptionKeyButtonAudioLabel translations.chatPage.settings
.setEncryptionKeyButtonAudioLabel
} }
on:click={settingsPageViewModel.setEncryptionKey} on:click={settingsPageViewModel.setEncryptionKey}
toggle:disabled={settingsPageViewModel.cannotSetEncryptionKey} toggle:disabled={settingsPageViewModel.cannotSetEncryptionKey}
@@ -154,5 +161,6 @@ export function SettingsPage(settingsPageViewModel: SettingsPageViewModel) {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }
src/View/ChatPages/taskPage.tsx
+7 -4
View File
@@ -1,6 +1,7 @@
import * as React from "bloatless-react"; import * as React from "bloatless-react";
import { BoardInfoToEntry } from "../Components/boardEntry"; import { BoardInfoToEntry } from "../Components/boardEntry";
import { BoardPage } from "./boardPage";
import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel"; import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
import { translations } from "../translations"; import { translations } from "../translations";
@@ -13,21 +14,22 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
const selectedBoard = taskPageViewModel.selectedBoard.value; const selectedBoard = taskPageViewModel.selectedBoard.value;
if (selectedBoard == undefined) { if (selectedBoard == undefined) {
return [ return [
<div class="content align-center justify-center"> <div class="pane align-center justify-center">
<span class="secondary"> <span class="secondary">
{translations.chatPage.task.noBoardSelected} {translations.chatPage.task.noBoardSelected}
</span> </span>
</div>, </div>,
]; ];
} else { } else {
return [<div class="toolbar"></div>, <div class="content"></div>]; return BoardPage(selectedBoard);
} }
} }
); );
return ( return (
<div id="task-page"> <div id="task-page">
<div class="pane side"> <div class="pane-wrapper side">
<div class="pane">
<div class="toolbar"> <div class="toolbar">
<div class="flex-row width-input"> <div class="flex-row width-input">
<input <input
@@ -58,8 +60,9 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
></div> ></div>
</div> </div>
</div> </div>
</div>
<div class="pane" children:set={paneContent}></div> <div class="pane-wrapper" children:set={paneContent}></div>
</div> </div>
); );
} }
src/View/chatPage.css
+44 -20
View File
@@ -30,9 +30,9 @@ body[showing-chat] #chat-page-wrapper {
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #main, #chat-page > div > #main,
#chat-page > div > #main > div, #chat-page > div > #main > div,
#chat-page > div > #main > div > .pane, #chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane > .toolbar, #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar,
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
display: flex; display: flex;
} }
@@ -50,40 +50,42 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page #main > div, #chat-page #main > div,
#chat-page > div > #main > div > .pane, #chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane,
#chat-page > div > #main > div > .pane-wrapper > .pane > .content {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex: 1; flex: 1;
} }
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane-wrapper,
#chat-page > div > #main > div > .pane-wrapper > .pane {
flex-direction: column; flex-direction: column;
scroll-snap-align: center; scroll-snap-align: center;
min-width: 100%; min-width: 100%;
} }
#chat-page > div > #main > div > .pane:not(.side), #chat-page > div > #main > div > .pane-wrapper > .pane:not(.side),
#chat-page > div > #main > div > .pane:not(.side) .content { #chat-page > div > #main > div > .pane-wrapper > .pane:not(.side) .content {
animation: slide-up var(--animation-duration); animation: slide-up var(--animation-duration);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#chat-page > div > #main > div > .pane { #chat-page > div > #main > div > .pane-wrapper {
min-width: unset; min-width: unset;
} }
#chat-page > div > #main > div > .pane.side { #chat-page > div > #main > div > .pane-wrapper.side {
max-width: 18rem; max-width: 18rem;
} }
} }
#chat-page > div > #main > div > .pane:not(:last-child) { #chat-page > div > #main > div > .pane-wrapper:not(:last-child) {
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .content { #chat-page > div > #main > div > .pane-wrapper > .pane > .content {
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
padding: var(--content-padding); padding: var(--content-padding);
@@ -97,12 +99,12 @@ body[showing-chat] #chat-page-wrapper {
/* ribbon, toolbar */ /* ribbon, toolbar */
#chat-page > div > #ribbon, #chat-page > div > #ribbon,
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
align-items: center; align-items: center;
} }
#chat-page #ribbon > span, #chat-page #ribbon > span,
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -135,7 +137,7 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page > div > #ribbon button, #chat-page > div > #ribbon button,
#chat-page > div > #main > div > .pane > .toolbar button { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button {
padding: 0px; padding: 0px;
width: 100%; width: 100%;
@@ -148,13 +150,28 @@ body[showing-chat] #chat-page-wrapper {
} }
#chat-page > div > #ribbon button.ribbon-button, #chat-page > div > #ribbon button.ribbon-button,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button { #chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
button.ribbon-button {
min-height: unset; min-height: unset;
height: calc(var(--control-height) - 2 * var(--gap-between-tiles)); height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
} }
#chat-page > div > #ribbon button.ribbon-button > .icon, #chat-page > div > #ribbon button.ribbon-button > .icon,
#chat-page > div > #main > div > .pane > .toolbar button.ribbon-button > .icon { #chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
button.ribbon-button
> .icon {
font-size: 1.1rem; font-size: 1.1rem;
} }
@@ -162,7 +179,7 @@ body[showing-chat] #chat-page-wrapper {
width: 100%; width: 100%;
} }
#chat-page > div > #main > div > .pane > .toolbar { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar {
height: var(--ribbon-size); height: var(--ribbon-size);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
@@ -173,11 +190,18 @@ body[showing-chat] #chat-page-wrapper {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
#chat-page > div > #main > div > .pane > .toolbar > span { #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
padding-left: var(--content-padding); padding-left: var(--content-padding);
} }
#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) { #chat-page
> div
> #main
> div
> .pane-wrapper
> .pane
> .toolbar
:is(input, select, button) {
height: 100%; height: 100%;
flex: 1; flex: 1;
} }