improve taskPage layout

dist/index.css

@@ -286,14 +286,15 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #ribbon > span {
   height: 100%;
   flex: 1;
-  overflow: auto;
+  overflow-y: auto;
   justify-content: flex-end;
 }
 #chat-page > div > #main > div > .pane > .toolbar {
   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);
 }
 #chat-page > div > #ribbon,
@@ -301,14 +302,23 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
 }
 #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 {
+#chat-page > div > #main > div > .pane > .toolbar > span {
-  width: 100%;
+  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,
 #chat-page > div > #main > div > .pane > .toolbar button {
@@ -320,6 +330,9 @@ body[showing-chat] #chat-page-wrapper {
   align-items: center;
   justify-content: center;
 }
+#chat-page > div > #ribbon > span {
+  width: 100%;
+}
 #chat-page > div > #ribbon > button {
   margin-top: var(--gap-between-tiles);
 }

dist/index.js

@@ -1964,7 +1964,7 @@
   // src/View/ChatPages/taskPage.tsx
   function TaskPage(taskPageViewModel) {
     taskPageViewModel.loadData();
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane side" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskPageViewModel.newBoardNameInput,
@@ -1980,12 +1980,15 @@
         "toggle:disabled": taskPageViewModel.cannotCreateBoard
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+    ))), /* @__PURE__ */ createElement("div", { class: "content" }, /* @__PURE__ */ createElement(
       "div",
       {
         class: "grid gap",
         style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))",
-        "children:append": [taskPageViewModel.boardViewModels, BoardInfoToEntry]
+        "children:append": [
+          taskPageViewModel.boardViewModels,
+          BoardInfoToEntry
+        ]
       }
     ))), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" })));
   }

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>
-
+        </div>
-          <hr></hr>
+        <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 {
+#chat-page > div > #main > div > .pane > .toolbar > span {
-  width: 100%;
+  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);
 }