fixes overflow content in gap-analysis list

Vizzuality · Nov 16, 2023 · a2f7900 · a2f7900
1 parent 5f149e2
commit a2f7900
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/app/components/gap-analysis/item/component.tsx b/app/components/gap-analysis/item/component.tsx
@@ -87,7 +87,7 @@ export const Item: React.FC<ItemProps> = ({
           delay={[400, null]}
           offset={[-10, -34]}
         >
-          <div className=" overflow-hidden overflow-ellipsis whitespace-nowrap pt-1 font-heading text-sm">
+          <div className="overflow-hidden overflow-ellipsis whitespace-nowrap pt-1 font-heading text-sm">
             {name}
           </div>
         </Tooltip>

diff --git a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/index.tsx
@@ -61,7 +61,7 @@ export const GridSetupGAPAnalysis = (): JSX.Element => {
         <Toolbar search={search} onSearch={onSearch} />
 
         <div className="relative flex h-full flex-col overflow-hidden before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-gray-800 before:via-gray-800 after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-gray-800 after:via-gray-800">
-          <ScrollArea className="h-full pr-3">
+          <ScrollArea className="h-full">
             <List search={search} />
           </ScrollArea>
         </div>

diff --git a/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/gap-analysis/list/index.tsx
@@ -77,9 +77,8 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
   }, []);
 
   return (
-    <div className="relative flex flex-grow flex-col">
+    <div className="relative">
       <div className="absolute -top-1 left-0 z-10 h-6 w-full bg-gradient-to-b from-gray-800 via-gray-800" />
-
       <div
         className={cn({
           'divide-y divide-dashed divide-black divide-opacity-20 bg-gray-800': true,
@@ -112,6 +111,7 @@ export const ScenariosPreGapAnalysisList = ({ search }: { search?: string }) =>
                     {...item}
                     highlighted={isHighlighted(item.id)}
                     onHighlight={() => toggleHighlight(item.id)}
+                    className="w-full"
                   />
                 </li>
               );