From e52bf9cfb7b685cfe1b7c8ebffe299028fcca2cc Mon Sep 17 00:00:00 2001
From: Joel Keyser <keyser.joel@gmail.com>
Date: Tue, 23 Jul 2024 11:04:43 -0500
Subject: [PATCH] touchup: zoom out table on mobile

was a bit too big to see anything
---
 src/web/topic/components/CriteriaTable/CriteriaTable.tsx | 4 ++++
 src/web/topic/components/CriteriaTable/tableZoom.ts      | 4 ++++
 src/web/topic/components/Score/Score.tsx                 | 6 +++++-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/web/topic/components/CriteriaTable/tableZoom.ts

diff --git a/src/web/topic/components/CriteriaTable/CriteriaTable.tsx b/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
index 3b8f391d..b9034ba4 100644
--- a/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
+++ b/src/web/topic/components/CriteriaTable/CriteriaTable.tsx
@@ -17,6 +17,7 @@ import { EdgeCell } from "@/web/topic/components/CriteriaTable/EdgeCell";
 import { NodeCell } from "@/web/topic/components/CriteriaTable/NodeCell";
 import { SolutionTotalCell } from "@/web/topic/components/CriteriaTable/SolutionTotalCell";
 import { TotalsHeaderCell } from "@/web/topic/components/CriteriaTable/TotalsHeaderCell";
+import { tableZoomClasses } from "@/web/topic/components/CriteriaTable/tableZoom";
 import { AddNodeButton } from "@/web/topic/components/Node/AddNodeButton";
 import {
   useCriterionSolutionEdges,
@@ -286,6 +287,9 @@ export const CriteriaTable = () => {
         muiTablePaperProps={{
           className: "criteria-table-paper",
         }}
+        muiTableProps={{
+          className: tableZoomClasses,
+        }}
         initialState={{
           // this won't work if the last row's header is just "totals" as a string
           columnPinning: { left: ["rowHeaderLabel"] },
diff --git a/src/web/topic/components/CriteriaTable/tableZoom.ts b/src/web/topic/components/CriteriaTable/tableZoom.ts
new file mode 100644
index 00000000..7185c582
--- /dev/null
+++ b/src/web/topic/components/CriteriaTable/tableZoom.ts
@@ -0,0 +1,4 @@
+/**
+ * Table is too big for small screens, so zoom out a little. Browsers still enable pinch to zoom in if this is too small.
+ */
+export const tableZoomClasses = "[zoom:60%] sm:[zoom:normal]";
diff --git a/src/web/topic/components/Score/Score.tsx b/src/web/topic/components/Score/Score.tsx
index df02e93a..acc96b5f 100644
--- a/src/web/topic/components/Score/Score.tsx
+++ b/src/web/topic/components/Score/Score.tsx
@@ -1,11 +1,13 @@
-import { useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
 
 import { htmlDefaultFontSize } from "@/pages/_document.page";
 import { useSessionUser } from "@/web/common/hooks";
+import { tableZoomClasses } from "@/web/topic/components/CriteriaTable/tableZoom";
 import { BackdropPopper, CircleDiv, ScorePopper } from "@/web/topic/components/Score/Score.styles";
 import { ScoreButton, buttonDiameterRem } from "@/web/topic/components/Score/ScoreButton";
 import { ScoreCompare } from "@/web/topic/components/Score/ScoreCompare";
 import { ScoreSelect } from "@/web/topic/components/Score/ScoreSelect";
+import { WorkspaceContext } from "@/web/topic/components/TopicWorkspace/WorkspaceContext";
 import { useFlowZoom } from "@/web/topic/hooks/flowHooks";
 import { useUserScores } from "@/web/topic/store/scoreHooks";
 import { playgroundUsername } from "@/web/topic/store/store";
@@ -27,6 +29,7 @@ export const Score = ({ graphPartId }: ScoreProps) => {
   const { sessionUser } = useSessionUser();
   const onPlayground = useOnPlayground();
   const readonlyMode = useReadonlyMode();
+  const workspaceContext = useContext(WorkspaceContext);
 
   const myUsername = onPlayground ? playgroundUsername : sessionUser?.username;
   const perspectives = usePerspectives();
@@ -121,6 +124,7 @@ export const Score = ({ graphPartId }: ScoreProps) => {
             },
           },
         ]}
+        className={workspaceContext === "table" ? tableZoomClasses : ""}
       >
         <CircleDiv circleDiameter={circleDiameter * zoomRatio}>{hoverCircle}</CircleDiv>