improve taskPage layout

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);
 }