[fix] Improve overflow on small screens

DSSD-Madison · Dec 3, 2024 · d9f4b6f · d9f4b6f
1 parent 82f6156
commit d9f4b6f
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/src/components/StatisticsFilterBar.tsx b/src/components/StatisticsFilterBar.tsx
@@ -11,14 +11,23 @@ type statsFilterProps = {
 
 const StatisticsFilterBar = ({ data, filters, dispatchFilters }: statsFilterProps) => {
   return (
-    <div className="flex h-8 items-center justify-start gap-2 border-b border-t border-gray-400 text-sm">
-      {filters.map((filter) => {
-        const FilterComponent = filter.component
-        return (
-          <FilterComponent key={filter.id} id={filter.id} data={data} dispatch={dispatchFilters} operation={filter.operation} state={filter.state} />
-        )
-      })}
-      <AddFilter dispatch={dispatchFilters} />
+    <div className="overflow-x-auto border-b border-t border-gray-400 text-sm">
+      <div className="flex h-8 w-max items-center justify-start gap-2">
+        {filters.map((filter) => {
+          const FilterComponent = filter.component
+          return (
+            <FilterComponent
+              key={filter.id}
+              id={filter.id}
+              data={data}
+              dispatch={dispatchFilters}
+              operation={filter.operation}
+              state={filter.state}
+            />
+          )
+        })}
+        <AddFilter dispatch={dispatchFilters} />
+      </div>
     </div>
   )
 }

diff --git a/src/components/filters/BaseFilter.tsx b/src/components/filters/BaseFilter.tsx
@@ -17,7 +17,7 @@ import {
 /**
  * Represents a filter chip that can be clicked to open a dropdown with more options. Handles the dropdown state and visibility.
  */
-const BaseFilter = ({ icon, text, children }: { icon: any; text: string; children: ReactNode }) => {
+const BaseFilter = ({ icon, text, children, scrollOverflow }: { icon: any; text: string; children: ReactNode; scrollOverflow?: boolean }) => {
   const [isOpen, setIsOpen] = useState(false)
   const arrowRef = useRef(null)
 
@@ -62,7 +62,10 @@ const BaseFilter = ({ icon, text, children }: { icon: any; text: string; childre
           <div
             ref={refs.setFloating}
             style={floatingStyles}
-            className="z-50 min-w-48 rounded-md border border-gray-300 bg-white px-1 py-2 shadow-lg focus-visible:outline-none"
+            className={
+              'z-50 min-w-48 rounded-md border border-gray-300 bg-white px-1 py-2 shadow-lg focus-visible:outline-none' +
+              (scrollOverflow ? ' overflow-y-auto' : '')
+            }
             {...getFloatingProps()}
           >
             <FloatingArrow fill="white" strokeWidth={1} stroke="#d1d5db" ref={arrowRef} context={context} />

diff --git a/src/components/filters/CategoryFilter.tsx b/src/components/filters/CategoryFilter.tsx
@@ -87,12 +87,12 @@ const CategoryFilter = ({ id, data, dispatch }: filterProps) => {
   }
 
   return (
-    <BaseFilter icon={<LucideTags />} text={'Categorías: ' + filterString.join(', ')}>
+    <BaseFilter icon={<LucideTags />} text={'Categorías: ' + filterString.join(', ')} scrollOverflow={true}>
       <button onClick={removeThisFilter} className="absolute right-2 top-1 h-4 w-4 text-red-600" title="Eliminar Filtro">
         <LucideTrash2 size={20} />
       </button>
       <div className="p-2">
-        <button onClick={() => selectAllCategories(true)} className="mr-2 rounded bg-neutral-500 px-2 py-1 text-white">
+        <button onClick={() => selectAllCategories(true)} className="mb-2 mr-2 rounded bg-neutral-500 px-2 py-1 text-white">
           Seleccionar todo
         </button>
         <button onClick={() => selectAllCategories(false)} className="mb-2 mr-4 rounded bg-neutral-500 px-2 py-1 text-white">

diff --git a/src/components/filters/CountryFilter.tsx b/src/components/filters/CountryFilter.tsx
@@ -128,12 +128,12 @@ const CountryFilter = ({ id, data, dispatch }: filterProps) => {
   }
 
   return (
-    <BaseFilter icon={<LucideGlobe />} text={'Áreas: ' + filterString.join(', ')}>
+    <BaseFilter icon={<LucideGlobe />} text={'Áreas: ' + filterString.join(', ')} scrollOverflow={true}>
       <button onClick={removeThisFilter} className="absolute right-2 top-1 h-4 w-4 text-red-600" title="Eliminar Filtro">
         <LucideTrash2 size={20} />
       </button>
       <div className="p-2">
-        <button onClick={() => selectAllCountries(true)} className="mr-2 rounded bg-neutral-500 px-2 py-1 text-white">
+        <button onClick={() => selectAllCountries(true)} className="mb-2 mr-2 rounded bg-neutral-500 px-2 py-1 text-white">
           Seleccionar todo
         </button>
         <button onClick={() => selectAllCountries(false)} className="mb-2 mr-4 rounded bg-neutral-500 px-2 py-1 text-white">