feat(board): add scrolling in mobile view for boards with many tiles (#…

…1780) * feat(mobile): add scrolling for boards with many tiles * chore(mobile): only allow y-axis scroll
entur · Jan 10, 2025 · cf024a9 · cf024a9
1 parent 9a2f105
commit cf024a9
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/tavla/src/Board/scenarios/Board/index.tsx b/tavla/src/Board/scenarios/Board/index.tsx
@@ -25,7 +25,7 @@ function Board({ board, style }: { board: TBoard; style?: CSSProperties }) {
 
     return (
         <div
-            className={`grid grid-cols-auto-fit-minmax gap-2.5 h-full overflow-hidden supports-[not(display:grid)]:flex supports-[not(display:grid)]:*:m-2.5 ${getFontScale(
+            className={`max-sm:overflow-y-scroll grid grid-cols-auto-fit-minmax gap-2.5 h-full overflow-hidden supports-[not(display:grid)]:flex supports-[not(display:grid)]:*:m-2.5 ${getFontScale(
                 board.meta?.fontSize || defaultFontSize(board),
             )} `}
             style={{

diff --git a/tavla/src/Board/scenarios/QuayTile/index.tsx b/tavla/src/Board/scenarios/QuayTile/index.tsx
@@ -53,7 +53,7 @@ export function QuayTile({
         .join(' ')
 
     return (
-        <Tile className="flex flex-col">
+        <Tile className="flex flex-col max-sm:min-h-[30vh]">
             <TableHeader
                 heading={displayName ?? heading}
                 walkingDistance={walkingDistance}

diff --git a/tavla/src/Board/scenarios/StopPlaceTile/index.tsx b/tavla/src/Board/scenarios/StopPlaceTile/index.tsx
@@ -48,7 +48,7 @@ export function StopPlaceTile({
     }
 
     return (
-        <Tile className="flex flex-col">
+        <Tile className="flex flex-col max-sm:min-h-[30vh]">
             <TableHeader
                 heading={displayName ?? data.stopPlace.name}
                 walkingDistance={walkingDistance}