From 96cea9b84b9dde7ff11fefb6b645827a75b829cd Mon Sep 17 00:00:00 2001
From: Sanghyeon Lee <yongdamsh@gmail.com>
Date: Sat, 4 Apr 2020 02:58:50 +0900
Subject: [PATCH] Make left panel height flexible to avoid overflow (#1169)

* Make overall left menu scrollable

* Make only mid-left panel scrollable

* Update src/styles.scss

* Update src/styles.scss

* Update src/components/LayerUI.tsx

* Remove unused class

* Move the scrolling role to Island

Co-authored-by: Lipis <lipiridis@gmail.com>
---
 src/components/Island.tsx  | 10 +++++++---
 src/components/LayerUI.tsx |  9 +++------
 src/styles.scss            |  5 +++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Island.tsx b/src/components/Island.tsx
index f59cb657..c4ef6ebc 100644
--- a/src/components/Island.tsx
+++ b/src/components/Island.tsx
@@ -2,12 +2,16 @@ import "./Island.css";
 
 import React from "react";
 
-type IslandProps = { children: React.ReactNode; padding?: number };
+type IslandProps = {
+  children: React.ReactNode;
+  padding?: number;
+  className?: string;
+};
 
 export const Island = React.forwardRef<HTMLDivElement, IslandProps>(
-  ({ children, padding }, ref) => (
+  ({ children, padding, className }, ref) => (
     <div
-      className="Island"
+      className={`${className ?? ""} Island`}
       style={{ "--padding": padding } as React.CSSProperties}
       ref={ref}
     >
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index fce230a6..2786b198 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -116,7 +116,7 @@ export const LayerUI = React.memo(
           <HintViewer appState={appState} elements={elements} />
           <div className="App-menu App-menu_top">
             <Stack.Col gap={4}>
-              <Section className="App-right-menu" heading="canvasActions">
+              <Section heading="canvasActions">
                 <Island padding={4}>
                   <Stack.Col gap={4}>
                     <Stack.Row gap={1} justifyContent={"space-between"}>
@@ -136,11 +136,8 @@ export const LayerUI = React.memo(
                 </Island>
               </Section>
               {showSelectedShapeActions(appState, elements) && (
-                <Section
-                  className="App-right-menu"
-                  heading="selectedShapeActions"
-                >
-                  <Island padding={4}>
+                <Section heading="selectedShapeActions">
+                  <Island className="App-menu__left" padding={4}>
                     <SelectedShapeActions
                       appState={appState}
                       elements={elements}
diff --git a/src/styles.scss b/src/styles.scss
index 51aee2ba..fd0886e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -266,6 +266,11 @@ button,
   height: 100%;
 }
 
+.App-menu__left {
+  overflow-y: auto;
+  max-height: calc(100vh - 236px);
+}
+
 .ErrorSplash {
   min-height: 100vh;
   padding: 20px 0;