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 {
-  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,
 #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);
 }