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

@@ -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}
     >

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
+                <Section heading="selectedShapeActions">
-                  className="App-right-menu"
+                  <Island className="App-menu__left" padding={4}>
-                  heading="selectedShapeActions"
-                >
-                  <Island padding={4}>
                     <SelectedShapeActions
                       appState={appState}
                       elements={elements}

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;