fix task layout on narrow screens

dist/index.css

@@ -353,6 +353,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 #chat-page > div > #ribbon button.ribbon-button,
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
+  min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   min-height: unset;
@@ -565,6 +566,17 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* src/View/ChatPages/taskPage.css */
+#task-page .task-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-between-tiles);
+}
+@media (min-width: 640px) {
+  #task-page .task-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  }
+}
 @media (max-width: 1024px) {
   #task-page #board-list {
     display: false;

dist/index.js

@@ -2512,8 +2512,7 @@
             return /* @__PURE__ */ createElement(
               "div",
               {
-                class: "grid gap",
+                class: "task-grid",
-                style: "grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))",
                 "children:append": [
                   boardViewModel.taskViewModels,
                   TaskViewModelToEntry

src/View/ChatPages/boardPage.tsx

@@ -20,8 +20,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
         default: {
           return (
             <div
-              class="grid gap"
+              class="task-grid"
-              style="grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))"
               children:append={[
                 boardViewModel.taskViewModels,
                 TaskViewModelToEntry,

src/View/ChatPages/taskPage.css

@@ -1,3 +1,16 @@
+#task-page .task-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-between-tiles);
+}
+
+@media (min-width: 640px) {
+  #task-page .task-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  }
+}
+
 @media (max-width: 1024px) {
   #task-page #board-list {
     display: false;

src/View/chatPage.css

@@ -157,6 +157,7 @@ body[showing-chat] #chat-page-wrapper {
   > .pane
   > .toolbar
   button.ribbon-button {
+  min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
   max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));