From 7fca897e283585c5c72339d079a7f8e38bd46725 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sun, 8 Mar 2026 00:24:54 +0530
Subject: [PATCH] refactor: Adjust filter modal's width, height, padding, and
 internal layout for improved display.

---
 src/components/profiles/FilterModal.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/profiles/FilterModal.tsx b/src/components/profiles/FilterModal.tsx
index 22313ae..2a2f967 100644
--- a/src/components/profiles/FilterModal.tsx
+++ b/src/components/profiles/FilterModal.tsx
@@ -45,14 +45,14 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* Backdrop */}
       <div className="absolute inset-0 bg-black/30" onClick={onClose} />
 
       {/* Modal */}
-      <div className="relative bg-white rounded-[20px] w-[600px] max-h-[90vh] overflow-hidden shadow-xl">
+      <div className="relative bg-white rounded-[20px] w-full max-w-[720px] max-h-[85vh] overflow-hidden shadow-xl flex flex-col">
         {/* Header */}
-        <div className="sticky top-0 bg-white px-8 py-5 border-b border-[#d9d9d9] flex items-center justify-between z-10">
+        <div className="shrink-0 bg-white px-8 py-5 border-b border-[#d9d9d9] flex items-center justify-between">
           <h2 className="font-fractul font-bold text-[25px] text-[#00293d]">Filters</h2>
           <button onClick={onClose} className="text-[#00293d] hover:opacity-70">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
@@ -62,7 +62,7 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
         </div>
 
         {/* Scrollable Content */}
-        <div className="overflow-y-auto max-h-[calc(90vh-180px)] px-8 py-5">
+        <div className="overflow-y-auto flex-1 px-8 py-6">
           {filterFields.map((field, index) => (
             <div key={field.slug}>
               <div className="mb-6">
@@ -76,7 +76,7 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
                   </svg>
                 </button>
                 {expandedSections[field.slug] && (
-                  <div className={`grid ${field.options.length > 6 ? 'grid-cols-3' : 'grid-cols-4'} gap-x-4 gap-y-3`}>
+                  <div className={`grid ${field.options.length > 6 ? 'grid-cols-3' : 'grid-cols-3'} gap-x-6 gap-y-3`}>
                     {field.options.map((option) => (
                       <label key={option.value} className="flex items-center gap-2 cursor-pointer">
                         <input
@@ -103,7 +103,7 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
         </div>
 
         {/* Footer */}
-        <div className="sticky bottom-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
+        <div className="shrink-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
           <button
             onClick={onClearAll}
             className="px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors"