Made filter popover less wide

mbeps · Apr 29, 2024 · 14b2b2a · 14b2b2a
1 parent 1c252b6
commit 14b2b2a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/components/Filters/FilterPanel.tsx b/components/Filters/FilterPanel.tsx
@@ -94,7 +94,7 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
         top-0 right-0 
         h-full 
         pt-${NAVBAR_HEIGHT} md:px-2 md:pb-3
-        w-full md:w-[25rem]
+        w-full md:w-[24rem]
         z-20 
         transform ${
           isOpen ? "translate-x-0" : "translate-x-full"
@@ -167,25 +167,26 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
             "
           >
             {/* Clear Button */}
-            <Link href={basePath} className="w-full" scroll={false}>
-              <Button
-                variant="default"
-                disabled={!areFiltersApplied}
-                className="
-                  w-full 
-                  flex justify-start 
-                  bg-neutral-100 
-                  border border-neutral-300 dark:border-neutral-700"
-              >
+            <Button
+              variant="default"
+              disabled={!areFiltersApplied}
+              className="
+                w-auto
+                px-6
+                flex justify-start 
+                bg-neutral-100 
+                border border-neutral-300 dark:border-neutral-700"
+            >
+              <Link href={basePath} className="w-full" scroll={false}>
                 <div className="flex items-center space-x-2">
                   <AiOutlineClear
                     fontSize={24}
                     className="text-neutral-700 dark:text-neutral-200"
                   />
                   <span>Clear All</span>
                 </div>
-              </Button>
-            </Link>
+              </Link>
+            </Button>
 
             {/* Archive Toggle */}
             {archiveFilter.hasArchivedMaterials && (

diff --git a/components/Filters/FilterPopover.tsx b/components/Filters/FilterPopover.tsx
@@ -80,7 +80,7 @@ const FilterPopover: React.FC<FilterPopover> = ({
           className="
             border border-neutral-300 dark:border-neutral-700
             shadow-sm
-            w-[24rem] md:w-[22rem]
+            w-full
             justify-between 
             bg-neutral-100
             py-2 h-full"
@@ -103,12 +103,12 @@ const FilterPopover: React.FC<FilterPopover> = ({
         </Button>
       </PopoverTrigger>
 
-      <PopoverContent className="w-[24rem] md:w-[22rem] p-0">
-        <Command className="w-[24rem] md:w-[22rem]">
+      <PopoverContent className="w-[24rem] md:w-[21rem] p-0">
+        <Command className="w-full">
           <CommandInput placeholder="Search Filter..." />
           <CommandEmpty>No Filter Found.</CommandEmpty>
 
-          <CommandGroup className="w-[24rem] md:w-[22rem] max-h-[25vh]">
+          <CommandGroup className="w-full max-h-[25vh]">
             {selectedFilterCategory.options.map((option, i) => (
               <Link
                 key={i}