make database game preview scrollable (closes #260)

franciscoBSalgueiro · Mar 30, 2024 · 53c4b9d · 53c4b9d
1 parent 3765914
commit 53c4b9d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 47 deletions.
diff --git a/src/components/databases/GameCard.tsx b/src/components/databases/GameCard.tsx
@@ -7,6 +7,7 @@ import {
   Divider,
   Group,
   Paper,
+  ScrollArea,
   Stack,
   Tooltip,
 } from "@mantine/core";
@@ -28,49 +29,51 @@ function GameCard({
 
   return (
     <Paper shadow="sm" p="sm" withBorder h="100%">
-      <Stack h="100%">
-        <GameInfo headers={game} />
-        <Divider />
-        <Group justify="left">
-          <Tooltip label="Analyze game">
-            <ActionIcon
-              variant="subtle"
-              onClick={() => {
-                createTab({
-                  tab: {
-                    name: `${game.white} - ${game.black}`,
-                    type: "analysis",
-                  },
-                  setTabs,
-                  setActiveTab,
-                  pgn: game.moves,
-                  headers: game,
-                });
-                navigate({ to: "/" });
-              }}
-            >
-              <IconZoomCheck size="1.2rem" stroke={1.5} />
-            </ActionIcon>
-          </Tooltip>
+      <ScrollArea h="100%">
+        <Stack h="100%" gap="xs">
+          <GameInfo headers={game} />
+          <Divider />
+          <Group justify="left">
+            <Tooltip label="Analyze game">
+              <ActionIcon
+                variant="subtle"
+                onClick={() => {
+                  createTab({
+                    tab: {
+                      name: `${game.white} - ${game.black}`,
+                      type: "analysis",
+                    },
+                    setTabs,
+                    setActiveTab,
+                    pgn: game.moves,
+                    headers: game,
+                  });
+                  navigate({ to: "/" });
+                }}
+              >
+                <IconZoomCheck size="1.2rem" stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
 
-          <Tooltip label="Delete game">
-            <ActionIcon
-              variant="subtle"
-              color="red"
-              onClick={() => {
-                invoke("delete_db_game", {
-                  file,
-                  gameId: game.id,
-                }).then(() => mutate());
-              }}
-            >
-              <IconTrash size="1.2rem" stroke={1.5} />
-            </ActionIcon>
-          </Tooltip>
-        </Group>
-        <Divider mb="sm" />
-        <GamePreview pgn={game.moves} headers={game} showOpening />
-      </Stack>
+            <Tooltip label="Delete game">
+              <ActionIcon
+                variant="subtle"
+                color="red"
+                onClick={() => {
+                  invoke("delete_db_game", {
+                    file,
+                    gameId: game.id,
+                  }).then(() => mutate());
+                }}
+              >
+                <IconTrash size="1.2rem" stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+          <Divider />
+          <GamePreview pgn={game.moves} headers={game} showOpening />
+        </Stack>
+      </ScrollArea>
     </Paper>
   );
 }

diff --git a/src/components/databases/GamePreview.tsx b/src/components/databases/GamePreview.tsx
@@ -5,8 +5,9 @@ import treeReducer, {
   type TreeState,
   getNodeAtPath,
 } from "@/utils/treeReducer";
-import { Box, Group, Stack, Text, rem } from "@mantine/core";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { useContext, useEffect, useState } from "react";
 import useSWRImmutable from "swr/immutable";
 import { useImmerReducer } from "use-immer";
 import GameNotation from "../boards/GameNotation";
@@ -67,6 +68,8 @@ function GamePreview({
     );
   }, [treeState.position, treeState.root]);
 
+  const { ref: boardRef, height } = useElementSize();
+
   return (
     <TreeStateContext.Provider value={treeState}>
       <TreeDispatchContext.Provider value={dispatch}>
@@ -75,10 +78,16 @@ function GamePreview({
             {opening}
           </Text>
         )}
-        <Group grow style={{ overflow: "hidden", height: "100%" }}>
-          <PreviewBoard />
+        <Group
+          align="start"
+          grow
+          style={{ overflow: "hidden", height: "100%" }}
+        >
+          <Box ref={boardRef}>
+            <PreviewBoard />
+          </Box>
           {!hideControls && (
-            <Stack h="100%" gap="xs">
+            <Stack style={{ height }} gap="xs">
               <GameNotation />
               <MoveControls
                 goToStart={() => dispatch({ type: "GO_TO_START" })}