From cf024a94cafaae8a2a5953fea277b871ac2fc765 Mon Sep 17 00:00:00 2001
From: SelmaBergstrand <78426277+SelmaBergstrand@users.noreply.github.com>
Date: Fri, 10 Jan 2025 13:30:53 +0100
Subject: [PATCH] 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
---
 tavla/src/Board/scenarios/Board/index.tsx         | 2 +-
 tavla/src/Board/scenarios/QuayTile/index.tsx      | 2 +-
 tavla/src/Board/scenarios/StopPlaceTile/index.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/tavla/src/Board/scenarios/Board/index.tsx b/tavla/src/Board/scenarios/Board/index.tsx
index 7f5f94251..a3b835d5e 100644
--- 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
index db3ff4ceb..c2ee80b93 100644
--- 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
index a248ebe8d..a690f264c 100644
--- 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}