improve zooming and scrolling

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,6 +1,4 @@
 import * as React from "bloatless-react";
-import * as Utility from "../../Model/Utility/utility";
-
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -12,12 +10,13 @@ import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPro
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import * as Utility from "../../Model/Utility/utility";
 
 export function BoardKanbanPage(
     coreViewModel: CoreViewModel,
     boardViewModel: BoardViewModel,
 ) {
-    const main = PropertyValueList(
+    return PropertyValueList(
         "category",
         (taskViewModel: TaskViewModel) => taskViewModel.task,
         boardViewModel.filteredTaskViewModels,
@@ -43,14 +42,12 @@ export function BoardKanbanPage(
 
             return (
                 <div
-                    class="kanban-board-wrapper"
+                    class="kanban-board-wrapper zoom"
                     children:append={[categories, categoryNameConverter]}
                 ></div>
             );
         },
     );
-    Utility.implementPinchZoom(main);
-    return main;
 }
 
 function Column(

src/View/ChatPages/boardPage.tsx

@@ -11,6 +11,7 @@ import BoardViewModel, {
     BoardPageTypes,
 } from "../../ViewModel/Pages/boardViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import * as Utility from "../../Model/Utility/utility";
 
 export function BoardPage(
     coreViewModel: CoreViewModel,
@@ -148,6 +149,7 @@ export function BoardPage(
                     </button>
                 </span>
             </div>
+
             <div class="content main-content" children:set={pages}></div>
 
             {BoardSettingsModal(coreViewModel, boardViewModel)}

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,6 +1,4 @@
 import * as React from "bloatless-react";
-import * as Utility from "../../Model/Utility/utility";
-
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -17,6 +15,7 @@ import {
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import * as Utility from "../../Model/Utility/utility";
 
 export function BoardStatusGridPage(
     coreViewModel: CoreViewModel,
@@ -42,8 +41,8 @@ export function BoardStatusGridPage(
         return StatusNameCell(coreViewModel, statusName, index, boardViewModel);
     };
 
-    const main = (
-        <div class="status-page-content">
+    return (
+        <div class="status-page-content zoom">
             <div
                 class="status-name-row"
                 children:append={[statuses, statusNameCellConverter]}
@@ -85,8 +84,6 @@ export function BoardStatusGridPage(
             )}
         </div>
     );
-    Utility.implementPinchZoom(main);
-    return main;
 }
 
 function StatusNameCell(

src/View/ChatPages/taskPage.css

@@ -3,6 +3,7 @@
     max-width: 100%;
 
     padding: 0px;
+    overflow: hidden;
 }
 
 #chat-page
@@ -24,16 +25,14 @@
     padding: var(--content-padding);
 }
 
-#chat-page > div > #main > #task-page .kanban-board-wrapper,
-#chat-page > div > #main > #task-page .status-page-content {
+#chat-page > div > #main > #task-page .zoom {
     display: flex;
     align-items: start;
     gap: var(--large-gap);
 
-    width: 100%;
-    height: 100%;
+    width: auto;
+    height: auto;
 
-    overflow: visible;
     transform-origin: top left;
 
     padding: var(--content-padding);