implement pinch to zoom

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,4 +1,6 @@
 import * as React from "bloatless-react";
+import * as Utility from "../../Model/Utility/utility";
+
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -15,7 +17,7 @@ export function BoardKanbanPage(
     coreViewModel: CoreViewModel,
     boardViewModel: BoardViewModel,
 ) {
-    return PropertyValueList(
+    const main = PropertyValueList(
         "category",
         (taskViewModel: TaskViewModel) => taskViewModel.task,
         boardViewModel.filteredTaskViewModels,
@@ -47,6 +49,8 @@ export function BoardKanbanPage(
             );
         },
     );
+    Utility.implementPinchZoom(main);
+    return main;
 }
 
 function Column(

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,4 +1,6 @@
 import * as React from "bloatless-react";
+import * as Utility from "../../Model/Utility/utility";
+
 import { ViewController } from "../viewController";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import {
@@ -40,7 +42,7 @@ export function BoardStatusGridPage(
         return StatusNameCell(coreViewModel, statusName, index, boardViewModel);
     };
 
-    return (
+    const main = (
         <div class="status-page-content">
             <div
                 class="status-name-row"
@@ -83,6 +85,8 @@ export function BoardStatusGridPage(
             )}
         </div>
     );
+    Utility.implementPinchZoom(main);
+    return main;
 }
 
 function StatusNameCell(

src/View/ChatPages/taskPage.css

@@ -33,11 +33,16 @@
     width: 100%;
     height: 100%;
 
-    overflow: auto;
+    overflow: visible;
+    transform-origin: top left;
 
     padding: var(--content-padding);
 }
 
+#board-content .main-content {
+    overflow: auto;
+}
+
 #chat-page > div > #main > #task-page .kanban-board-wrapper .kanban-column,
 #chat-page > div > #main > #task-page .status-grid-wrapper .status-column {
     display: flex;