From 945f0dafaac3d78b75575879e95b43ad9a7e6be4 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Sat, 18 Apr 2026 08:14:46 +0530
Subject: [PATCH] style: refine validation error UI in HeroSection and improve
 FilterModal section header layout

---
 src/components/home/HeroSection.tsx     | 8 ++++----
 src/components/profiles/FilterModal.tsx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
index 36ad69a..b874ae7 100644
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@@ -241,15 +241,15 @@ export function HeroSection({ content }: { content?: HeroContent }) {
 
           {/* Validation Error Message */}
           {validationError && (
-            <div className="absolute left-0 right-0 mt-2 text-center z-10 px-4">
-              <div className="text-white font-serif text-sm bg-red-500/90 rounded-[7px] py-2 px-4 inline-flex items-center gap-3 max-w-full">
+            <div className="mt-3 flex justify-center px-2">
+              <div className="text-white font-serif text-xs md:text-sm bg-red-500/90 rounded-[7px] py-1.5 px-3 inline-flex items-center gap-2 max-w-fit shadow-md">
                 <span className="text-left">{validationError}</span>
                 <button
                   onClick={handleClearError}
-                  className="hover:bg-white/20 rounded-full p-0.5 transition-colors"
+                  className="flex-shrink-0 hover:bg-white/20 rounded-full p-0.5 transition-colors"
                   title="Dismiss"
                 >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                   </svg>
                 </button>
diff --git a/src/components/profiles/FilterModal.tsx b/src/components/profiles/FilterModal.tsx
index 2dd8f0f..109f34b 100644
--- a/src/components/profiles/FilterModal.tsx
+++ b/src/components/profiles/FilterModal.tsx
@@ -68,10 +68,10 @@ export function FilterModal({ isOpen, onClose, filters, filterFields, onToggleFi
               <div className="mb-6">
                 <button
                   onClick={() => toggleSection(field.slug)}
-                  className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+                  className="w-full flex items-center justify-between gap-2 font-fractul text-[20px] text-[#00293d] mb-4 text-left"
                 >
-                  {field.name}
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections[field.slug] ? 'rotate-180' : ''}`}>
+                  <span className="flex-1 min-w-0">{field.name}</span>
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`flex-shrink-0 transition-transform ${expandedSections[field.slug] ? 'rotate-180' : ''}`}>
                     <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                   </svg>
                 </button>