From 969979bd3e2a80bee9d1feeca534f34271383e18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= <jvaclavik@gmail.com>
Date: Wed, 11 Oct 2023 23:22:39 +0200
Subject: [PATCH] Make RouteList scrollable

---
 src/components/FeaturePanel/Climbing/ClimbingPanel.tsx | 1 +
 src/components/FeaturePanel/Climbing/ClimbingView.tsx  | 3 +++
 src/components/FeaturePanel/Climbing/Guide.tsx         | 8 ++++----
 src/components/FeaturePanel/Climbing/RouteList.tsx     | 9 +++++++--
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
index 707edb337..786830b01 100644
--- a/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
+++ b/src/components/FeaturePanel/Climbing/ClimbingPanel.tsx
@@ -8,6 +8,7 @@ import { PanelScrollbars, PanelWrapper } from '../../utils/PanelHelpers';
 
 const EditRoutesContainer = styled.div`
   padding: 10px;
+  overflow: auto;
 `;
 
 export const ClimbingPanel = () => {
diff --git a/src/components/FeaturePanel/Climbing/ClimbingView.tsx b/src/components/FeaturePanel/Climbing/ClimbingView.tsx
index 233465876..a9149975c 100644
--- a/src/components/FeaturePanel/Climbing/ClimbingView.tsx
+++ b/src/components/FeaturePanel/Climbing/ClimbingView.tsx
@@ -21,6 +21,9 @@ type Props = {
 
 const Container = styled.div`
   position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 `;
 const StickyContainer = styled.div<{ imageHeight: number }>`
   position: relative;
diff --git a/src/components/FeaturePanel/Climbing/Guide.tsx b/src/components/FeaturePanel/Climbing/Guide.tsx
index 2c2627f51..634af9ec8 100644
--- a/src/components/FeaturePanel/Climbing/Guide.tsx
+++ b/src/components/FeaturePanel/Climbing/Guide.tsx
@@ -13,14 +13,14 @@ export const Guide = () => {
     useClimbingContext();
 
   return (
-    <GuideContainer>
-      {isSelectedRouteEditable && (
+    isSelectedRouteEditable && (
+      <GuideContainer>
         <Alert severity="info" variant="filled">
           {routes[routeSelectedIndex].path.length === 0
             ? t('climbingpanel.create_first_node')
             : t('climbingpanel.create_next_node')}
         </Alert>
-      )}
-    </GuideContainer>
+      </GuideContainer>
+    )
   );
 };
diff --git a/src/components/FeaturePanel/Climbing/RouteList.tsx b/src/components/FeaturePanel/Climbing/RouteList.tsx
index 62e465807..1eb735066 100644
--- a/src/components/FeaturePanel/Climbing/RouteList.tsx
+++ b/src/components/FeaturePanel/Climbing/RouteList.tsx
@@ -29,6 +29,11 @@ type Props = {
   onDeleteExistingRouteClick: (deletedExistingRouteIndex: number) => void;
   isReadOnly: boolean;
 };
+const Container = styled.div`
+  flex: 1;
+  overflow: auto;
+`;
+
 const EmptyValue = styled.div`
   color: #666;
 `;
@@ -159,7 +164,7 @@ export const RouteList = ({
   if (isReadOnly && routes.length === 0) return null;
 
   return (
-    <div>
+    <Container>
       <TableContainer>
         <Table size="small">
           {!isReadOnly && (
@@ -203,6 +208,6 @@ export const RouteList = ({
           </TableBody>
         </Table>
       </TableContainer>
-    </div>
+    </Container>
   );
 };