touchup: zoom out table on mobile

was a bit too big to see anything
amelioro · Jul 23, 2024 · 859c145 · 859c145
1 parent 173ce62
commit 859c145
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git 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,
@@ -284,6 +285,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
@@ -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
@@ -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>