Make RouteList scrollable

zbycz · Oct 11, 2023 · 969979b · 969979b
1 parent 37ed551
commit 969979b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };