Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Adjust filter modal's width, height, padding, and internal layout for improved display.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-08 00:24:54 +05:30
parent bd9dd363dc
commit 7fca897e28
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/profiles/FilterModal.tsx
View File

@@ -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"