From 14b2b2a89bd37d9adbfdfaf596a7d40b97d2b3a9 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Mon, 29 Apr 2024 11:10:26 +0100
Subject: [PATCH] Made filter popover less wide

---
 components/Filters/FilterPanel.tsx   | 27 ++++++++++++++-------------
 components/Filters/FilterPopover.tsx |  8 ++++----
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/Filters/FilterPanel.tsx b/components/Filters/FilterPanel.tsx
index 90d77d15..68babed8 100644
--- 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,16 +167,17 @@ 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}
@@ -184,8 +185,8 @@ const FilterOverlay: React.FC<FilterOverlayProps> = ({
                   />
                   <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
index 180ca18c..ac86f9a7 100644
--- 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}