From af676ebcc3b214d6877c3b6ac2f1b9ce1ada6f27 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Mon, 26 Feb 2024 14:23:59 +0000
Subject: [PATCH 1/2] Add scrolling to the layers/legend container if it
 doesn't fit the screen

---
 .../src/containers/map/content/map/layers-toolbox/index.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
index dd46fbaa..c5afe8e3 100644
--- a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
+++ b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
@@ -16,7 +16,7 @@ const LayersToolbox = (): JSX.Element => {
 
   return (
     <Tabs
-      className="absolute bottom-0 right-0 flex w-[335px] flex-col items-end"
+      className="absolute bottom-0 right-0 flex max-h-[calc(100%-100px)] w-[335px] flex-col items-end"
       defaultValue={activeLayers.length ? 'legend' : 'layers-list'}
     >
       <TabsList className="h-auto rounded-none bg-white p-0">
@@ -39,7 +39,7 @@ const LayersToolbox = (): JSX.Element => {
           /> */}
         </TabsTrigger>
       </TabsList>
-      <div className="w-full border border-black bg-white py-3 px-6">
+      <div className="w-full overflow-y-scroll border border-black bg-white py-3 px-6">
         <TabsContent value="layers-list" className="m-0">
           <LayersDropdown />
         </TabsContent>

From afc972efa98fa8f93f3e2a6933815e0706b83960 Mon Sep 17 00:00:00 2001
From: Simao Rodrigues <arodrigues.simao@gmail.com>
Date: Mon, 26 Feb 2024 14:31:21 +0000
Subject: [PATCH 2/2] Clean up unused/commented out code from the LayersToolbox

---
 .../map/content/map/layers-toolbox/index.tsx  | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
index c5afe8e3..10e6a9ae 100644
--- a/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
+++ b/frontend/src/containers/map/content/map/layers-toolbox/index.tsx
@@ -1,5 +1,3 @@
-// import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
-
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 import { useSyncMapLayers } from '../sync-settings';
@@ -9,7 +7,6 @@ import Legend from './legend';
 
 const TABS_TRIGGER_CLASSES =
   'group flex flex-1 items-center space-x-1 rounded-none border border-b-0 border-black py-3 px-6 font-mono text-sm font-bold uppercase leading-none text-black last:border-l-0 data-[state=active]:bg-orange';
-// const TABS_ICONS_CLASSES = 'w-6 h-6 -translate-y-[2px]';
 
 const LayersToolbox = (): JSX.Element => {
   const [activeLayers] = useSyncMapLayers();
@@ -21,22 +18,10 @@ const LayersToolbox = (): JSX.Element => {
     >
       <TabsList className="h-auto rounded-none bg-white p-0">
         <TabsTrigger value="layers-list" className={TABS_TRIGGER_CLASSES} tabIndex={0}>
-          <span>layers</span>
-          {/* <LuChevronDown
-            className={`hidden group-data-[state=active]:block ${TABS_ICONS_CLASSES}`}
-          />
-          <LuChevronUp
-            className={`hidden group-data-[state=inactive]:block ${TABS_ICONS_CLASSES}`}
-          /> */}
+          <span>Layers</span>
         </TabsTrigger>
         <TabsTrigger value="legend" className={TABS_TRIGGER_CLASSES} tabIndex={0}>
-          <span>legend</span>
-          {/* <LuChevronDown
-            className={`hidden group-data-[state=active]:block ${TABS_ICONS_CLASSES}`}
-          />
-          <LuChevronUp
-            className={`hidden group-data-[state=inactive]:block ${TABS_ICONS_CLASSES}`}
-          /> */}
+          <span>Legend</span>
         </TabsTrigger>
       </TabsList>
       <div className="w-full overflow-y-scroll border border-black bg-white py-3 px-6">