Merge pull request #190 from Vizzuality/initial-legend-layers-scrolling

[SKY30-290] Add scrolling to the Layers/Legend in the map when content doesn't fit
Vizzuality · Feb 26, 2024 · 0341a13 · 0341a13
2 parents a410636 + afc972e
commit 0341a13
Showing 1 changed file with 4 additions and 19 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
@@ -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,37 +7,24 @@ 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();
 
   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">
         <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 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>