fix task layout on narrow screens

src/View/ChatPages/boardPage.tsx

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

src/View/ChatPages/taskPage.css

@@ -1,17 +1,30 @@
+#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;
-    }
+  #task-page #board-list {
+    display: false;
+  }
 
-    #task-page #board-content {
-        display: none;
-    }
+  #task-page #board-content {
+    display: none;
+  }
 
-    #task-page[isshowingboard] #board-list {
-        display: none;
-    }
+  #task-page[isshowingboard] #board-list {
+    display: none;
+  }
 
-    #task-page[isshowingboard] #board-content {
-        display: flex;
-    }
-}
+  #task-page[isshowingboard] #board-content {
+    display: flex;
+  }
+}

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