From 9695d84518f95759c03ce472e715412e9b0c0d63 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Wed, 24 Jul 2024 15:59:48 +0200
Subject: [PATCH] fix task layout on narrow screens

---
 dist/index.css                   | 12 ++++++++++
 dist/index.js                    |  3 +--
 src/View/ChatPages/boardPage.tsx |  3 +--
 src/View/ChatPages/taskPage.css  | 39 +++++++++++++++++++++-----------
 src/View/chatPage.css            |  1 +
 5 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/dist/index.css b/dist/index.css
index 8b2f8ea9..220c1c6c 100644
--- a/dist/index.css
+++ b/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;
diff --git a/dist/index.js b/dist/index.js
index e4786bbc..9f77952d 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -2512,8 +2512,7 @@
             return /* @__PURE__ */ createElement(
               "div",
               {
-                class: "grid gap",
-                style: "grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr))",
+                class: "task-grid",
                 "children:append": [
                   boardViewModel.taskViewModels,
                   TaskViewModelToEntry
diff --git a/src/View/ChatPages/boardPage.tsx b/src/View/ChatPages/boardPage.tsx
index f7dc390a..42ffb276 100644
--- a/src/View/ChatPages/boardPage.tsx
+++ b/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,
diff --git a/src/View/ChatPages/taskPage.css b/src/View/ChatPages/taskPage.css
index c6d41db4..74332b8a 100644
--- a/src/View/ChatPages/taskPage.css
+++ b/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;
-    }
-}
\ No newline at end of file
+  #task-page[isshowingboard] #board-content {
+    display: flex;
+  }
+}
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index 88285b0f..dbe26dec 100644
--- a/src/View/chatPage.css
+++ b/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));