refactor(ui): update positioning classes for consistent header alignment across components

Author: Yuval

03-Client/src/app/components/CompareSystem.tsx

@@ -184,8 +184,8 @@ export function CompareSystem() {
       {/* Scrollable content */}
       <div
         ref={scrollRef}
-        className="absolute left-[12px] right-[12px] z-20 overflow-y-auto"
-        style={{ top: 93, bottom: 105, scrollbarWidth: "none" }}
+        className="below-header absolute left-[12px] right-[12px] z-20 overflow-y-auto"
+        style={{ bottom: 105, scrollbarWidth: "none" }}
       >
         {/* Description */}
         <div className="bg-[#f3fbfd] rounded-[12px] p-[14px] mb-[10px]">

03-Client/src/app/components/DictionaryScreen.tsx

@@ -193,8 +193,8 @@ export function DictionaryScreen() {
       {/* Content Panel */}
       <div
         ref={scrollRef}
-        className="absolute left-[14px] right-[14px] z-20 overflow-y-auto"
-        style={{ top: 93, bottom: 105, scrollbarWidth: "none" }}
+        className="below-header absolute left-[14px] right-[14px] z-20 overflow-y-auto"
+        style={{ bottom: 105, scrollbarWidth: "none" }}
       >
         <div className="bg-[#f3fbfd] rounded-[14px] p-[16px]">
           {/* FAQ Section */}

03-Client/src/app/components/EditHomeAddressScreen.tsx

@@ -81,7 +81,7 @@ export function EditHomeAddressScreen() {
       </div>
 
       {/* Content */}
-      <div className="absolute left-0 right-0 px-[16px]" style={{ top: 93, bottom: 24 }}>
+      <div className="below-header absolute left-0 right-0 px-[16px]" style={{ bottom: 24 }}>
         <p className="font-['Heebo',sans-serif] text-[#6B7280] text-[13px] mb-[16px]" style={{ fontWeight: 500 }}>
           הכתובת תופיע באזור האישי ותשמש לשליחת התראות על דיווחים חדשים באזור שלך.
         </p>

03-Client/src/app/components/NearbyReportsScreen.tsx

@@ -411,8 +411,7 @@ export function NearbyReportsScreen() {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.25 }}
-            className="absolute z-30 left-[10px] right-[10px]"
-            style={{ top: 82 }}
+            className="below-header-flush absolute z-30 left-[10px] right-[10px]"
           >
             <div className="bg-[#f3fbfd] rounded-b-[10px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] px-[14px] py-[10px] flex items-center justify-between gap-[8px]" dir="rtl">
               <div className="flex-1 min-w-0">

03-Client/src/app/components/SettingsScreen.tsx

@@ -150,8 +150,8 @@ export function SettingsScreen() {
       {/* Scrollable content */}
       <div
         ref={scrollRef}
-        className="absolute left-0 right-0 z-20 overflow-y-auto"
-        style={{ top: 93, bottom: 95, scrollbarWidth: "none" }}
+        className="below-header absolute left-0 right-0 z-20 overflow-y-auto"
+        style={{ bottom: 95, scrollbarWidth: "none" }}
       >
         <div className="px-[14px] pb-[16px]">
 

03-Client/src/app/components/address-search/AddressInfoPanel.tsx

@@ -183,8 +183,8 @@ export function AddressInfoPanel({
 
       {/* Panel wrapper */}
       <div
-        className="absolute z-20 pointer-events-none"
-        style={{ top: 93, left: 28, right: 28, bottom: 95 }}
+        className="below-header absolute z-20 pointer-events-none"
+        style={{ left: 28, right: 28, bottom: 95 }}
       >
         <div
           ref={scrollRef}

03-Client/src/styles/theme.css

@@ -139,6 +139,11 @@
   top: calc(var(--safe-top) + var(--top-bar-gap)) !important;
 }
 
+/* Content flush to the header (hardcoded top-[82px], +4px gap) */
+.below-header-flush {
+  top: calc(var(--header-end) + 4px) !important;
+}
+
 /* Content blocks that were hardcoded to top-[93px] (header + 15px gap) */
 .below-header {
   top: calc(var(--header-end) + 15px) !important;