feat: update padding management in various components for improved layout consistency

src/app/candidate-contact/page.tsx

@@ -50,7 +50,10 @@ export default function CandidateContactPage() {
           </div>
         </section>
 
-        <section className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex w-full sm:max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 pb-8 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]">
+        <section 
+          style={{ paddingBottom: `calc(2rem + var(--safe-bottom))` }}
+          className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex w-full sm:max-w-[375px] gap-3 rounded-t-[30px] bg-white px-[17px] pt-6 shadow-[0_-18px_50px_rgba(15,23,42,0.08)]"
+        >
           <Button className="" onClick={() => setIsCallResultSheetOpen(true)}>
             {t.candidateContact.contacted}
           </Button>

src/app/globals.css

@@ -54,8 +54,6 @@ html:lang(ar) body,
   width: 100%;
   min-height: 100vh;
   padding-inline: 17px;
-  padding-top: var(--safe-top);
-  padding-bottom: var(--safe-bottom);
   box-sizing: border-box;
   background-color: var(--background);
   background-image: var(--default-page-background-image);

src/app/new-match/profile/page.tsx

@@ -324,7 +324,10 @@ export default function NewMatchProfilePage() {
           </div>
         </section>
 
-        <div className="fixed inset-x-0 bottom-0 z-30 px-[17px]">
+        <div 
+          style={{ paddingBottom: `var(--safe-bottom)` }}
+          className="fixed inset-x-0 bottom-0 z-30 px-[17px]"
+        >
           <div className="mx-auto w-full sm:max-w-[375px] rounded-t-[24px] bg-white px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
             <div className="flex gap-3">
               <button

src/components/sliders/slider-page.tsx

@@ -205,7 +205,10 @@ export default function SliderPage() {
       </main>
 
       <div className="pointer-events-none fixed bottom-0 left-1/2 z-20 w-full sm:max-w-[375px] -translate-x-1/2 bg-[#F5F5F5]">
-        <div className="mx-auto w-full sm:max-w-[375px] px-[17px] pt-2.5 pb-6">
+        <div 
+          style={{ paddingBottom: `calc(1.5rem + var(--safe-bottom))` }}
+          className="mx-auto w-full sm:max-w-[375px] px-[17px] pt-2.5"
+        >
           <div className="pointer-events-auto">
             {activeSlide === 0 ? (
               <SliderSlideOneActions onAccept={goToNextSlide} />

src/components/ui/sticky-header.tsx

@@ -16,9 +16,9 @@ export default function StickyHeader({
 
   return (
     <header
-      style={{ paddingTop: `calc(1.75rem + ${top}px)` }}
+      style={{ top: `-${top}px`, paddingTop: `${top}px` }}
       className={[
-        "sticky top-0 z-30 rounded-b-[15px] bg-[linear-gradient(135deg,#E03950_0%,#FE6F82_100%)] px-[17px] pb-5",
+        "sticky z-30 rounded-b-[15px] bg-[linear-gradient(135deg,#E03950_0%,#FE6F82_100%)] px-[17px] pt-7 pb-5",
         className,
       ]
         .filter(Boolean)