improve taskPage layout

src/View/ChatPages/taskPage.tsx

@@ -10,7 +10,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   return (
     <div id="task-page">
       <div class="pane side">
-        <div class="content">
+        <div class="toolbar">
           <div class="flex-row width-input">
             <input
               bind:value={taskPageViewModel.newBoardNameInput}
@@ -28,13 +28,15 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
               <span class="icon">add</span>
             </button>
           </div>
-
-          <hr></hr>
-
+        </div>
+        <div class="content">
           <div
             class="grid gap"
             style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
-            children:append={[taskPageViewModel.boardViewModels, BoardInfoToEntry]}
+            children:append={[
+              taskPageViewModel.boardViewModels,
+              BoardInfoToEntry,
+            ]}
           ></div>
         </div>
       </div>

src/View/chatPage.css

@@ -104,7 +104,7 @@ body[showing-chat] #chat-page-wrapper {
   height: 100%;
 
   flex: 1;
-  overflow: auto;
+  overflow-y: auto;
 
   justify-content: flex-end;
 }
@@ -113,9 +113,10 @@ body[showing-chat] #chat-page-wrapper {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
 
+  overflow-y: hidden;
   overflow-x: auto;
 
-  padding-left: var(--content-padding);
+  padding: var(--gap-between-tiles);
   border-top: 1px solid var(--border);
 }
 
@@ -125,16 +126,27 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 #chat-page #ribbon > span,
-#chat-page > div > #main > div > .pane > .toolbar > span {
+#chat-page > div > #main > div > .pane > .toolbar {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
 
   padding: var(--gap-between-tiles);
   gap: var(--gap-between-tiles);
 }
 
-#chat-page > div > #ribbon > span {
-  width: 100%;
+#chat-page > div > #main > div > .pane > .toolbar > span {
+  padding-left: var(--content-padding);
+}
+
+#chat-page > div > #main > div > .pane > .toolbar :is(input, select, button) {
+  height: 100%;
+  flex: 1;
+}
+
+#chat-page #ribbon > span {
+  flex-direction: column;
 }
 
 #chat-page > div > #ribbon button,
@@ -150,6 +162,10 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 
+#chat-page > div > #ribbon > span {
+  width: 100%;
+}
+
 #chat-page > div > #ribbon > button {
   margin-top: var(--gap-between-tiles);
 }