From ad121581d338fb47418dd2f15735ca868163e5c7 Mon Sep 17 00:00:00 2001
From: sina_sajjadi <alisina.a.a50182@gmail.com>
Date: Sat, 16 May 2026 13:36:52 +0330
Subject: [PATCH] feat: update layout and styling for responsive design across
 multiple components

---
 src/app/candidate-contact/page.tsx            |  2 +-
 src/app/globals.css                           |  8 +++-
 src/app/layout.tsx                            | 43 -------------------
 src/app/loading.tsx                           | 16 -------
 src/app/new-match/profile/page.tsx            |  2 +-
 .../questions/question-progress-tracker.tsx   |  2 +-
 src/components/sliders/slider-page.tsx        |  4 +-
 src/components/ui/call-result-sheet.tsx       |  2 +-
 src/components/ui/dismiss-reason-sheet.tsx    |  2 +-
 src/components/ui/female-consent-sheet.tsx    |  2 +-
 src/components/ui/information-sheet.tsx       |  2 +-
 src/components/ui/report-actions-sheet.tsx    |  2 +-
 12 files changed, 17 insertions(+), 70 deletions(-)
 delete mode 100644 src/app/loading.tsx

diff --git a/src/app/candidate-contact/page.tsx b/src/app/candidate-contact/page.tsx
index 1f4ea78..3264e11 100644
--- a/src/app/candidate-contact/page.tsx
+++ b/src/app/candidate-contact/page.tsx
@@ -50,7 +50,7 @@ export default function CandidateContactPage() {
           </div>
         </section>
 
-        <section className="fixed right-0 bottom-0 left-0 z-20 mx-auto flex 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 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)]">
           <Button className="" onClick={() => setIsCallResultSheetOpen(true)}>
             {t.candidateContact.contacted}
           </Button>
diff --git a/src/app/globals.css b/src/app/globals.css
index 045037e..61a1716 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -47,7 +47,7 @@ html:lang(ar) body,
 }
 
 .app-shell {
-  width: min(100%, 375px);
+  width: 100%;
   min-height: 100vh;
   padding-inline: 17px;
   box-sizing: border-box;
@@ -58,6 +58,12 @@ html:lang(ar) body,
   background-size: cover;
 }
 
+@media (min-width: 640px) {
+  .app-shell {
+    width: 375px;
+  }
+}
+
 body[data-page-background="none"] .app-shell {
   background-image: none;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4ac88b7..278017b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -143,54 +143,11 @@ export default function RootLayout({
             `,
           }}
         />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              if (typeof window !== 'undefined') {
-                var REDIRECT_SESSION_KEY = 'redirect';
-
-                function renderRedirectDebug() {
-                  var badge = document.getElementById('redirect-debug-badge');
-                  if (!badge) {
-                    return;
-                  }
-
-                  var redirectValue = window.sessionStorage.getItem(REDIRECT_SESSION_KEY);
-                  badge.textContent =
-                    redirectValue === null
-                      ? 'redirect: missing'
-                      : 'redirect: ' + redirectValue;
-                }
-
-                var originalSetItem = window.sessionStorage.setItem.bind(window.sessionStorage);
-                var originalRemoveItem = window.sessionStorage.removeItem.bind(window.sessionStorage);
-
-                window.sessionStorage.setItem = function(key, value) {
-                  originalSetItem(key, value);
-                  renderRedirectDebug();
-                };
-
-                window.sessionStorage.removeItem = function(key) {
-                  originalRemoveItem(key);
-                  renderRedirectDebug();
-                };
-
-                window.addEventListener('load', renderRedirectDebug);
-                window.addEventListener('pageshow', renderRedirectDebug);
-                window.setTimeout(renderRedirectDebug, 0);
-              }
-            `,
-          }}
-        />
       </head>
       <body className={`${faminela.variable} ${amiri.variable}`}>
         <Providers>
           <div className="app-shell">{children}</div>
         </Providers>
-        <div
-          id="redirect-debug-badge"
-          className="fixed bottom-3 right-3 z-[9999] rounded bg-black/75 px-2 py-1 text-xs text-white"
-        />
         {process.env.NODE_ENV === "development" ? (
           <DevClickToComponent />
         ) : null}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
deleted file mode 100644
index 6d725b8..0000000
--- a/src/app/loading.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function Loading() {
-  return (
-    <div className="min-h-screen bg-white p-4 animate-pulse">
-      <div className="h-8 bg-gray-200 rounded-lg w-3/4 mb-6"></div>
-      <div className="space-y-3">
-        <div className="h-4 bg-gray-200 rounded w-full"></div>
-        <div className="h-4 bg-gray-200 rounded w-5/6"></div>
-        <div className="h-4 bg-gray-200 rounded w-4/6"></div>
-      </div>
-      <div className="mt-8 space-y-4">
-        <div className="h-24 bg-gray-200 rounded-lg"></div>
-        <div className="h-24 bg-gray-200 rounded-lg"></div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/new-match/profile/page.tsx b/src/app/new-match/profile/page.tsx
index 072d8aa..42ecf6c 100644
--- a/src/app/new-match/profile/page.tsx
+++ b/src/app/new-match/profile/page.tsx
@@ -325,7 +325,7 @@ export default function NewMatchProfilePage() {
         </section>
 
         <div className="fixed inset-x-0 bottom-0 z-30 px-[17px]">
-          <div className="mx-auto max-w-[375px] rounded-t-[24px] bg-white px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)]">
+          <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
                 type="button"
diff --git a/src/components/questions/question-progress-tracker.tsx b/src/components/questions/question-progress-tracker.tsx
index b867f61..18c2608 100644
--- a/src/components/questions/question-progress-tracker.tsx
+++ b/src/components/questions/question-progress-tracker.tsx
@@ -101,7 +101,7 @@ export function QuestionProgressTracker({
       onInput={updateProgress}
     >
       <div className="mb-5 h-[68px]" aria-hidden="true" />
-      <div className="fixed top-[100px] left-1/2 z-20 w-full max-w-[375px] -translate-x-1/2 px-[17px]">
+      <div className="fixed top-[100px] left-1/2 z-20 w-full sm:max-w-[375px] -translate-x-1/2 px-[17px]">
         <div
           aria-label={`Answered questions: ${answered} of ${safeTotal}`}
           aria-valuemax={safeTotal}
diff --git a/src/components/sliders/slider-page.tsx b/src/components/sliders/slider-page.tsx
index 77ee9cd..6f30869 100644
--- a/src/components/sliders/slider-page.tsx
+++ b/src/components/sliders/slider-page.tsx
@@ -204,8 +204,8 @@ export default function SliderPage() {
         </div>
       </main>
 
-      <div className="pointer-events-none fixed bottom-0 left-1/2 z-20 w-full max-w-[375px] -translate-x-1/2 bg-[#F5F5F5]">
-        <div className="mx-auto w-full max-w-[375px] px-[17px] pt-2.5 pb-6">
+      <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 className="pointer-events-auto">
             {activeSlide === 0 ? (
               <SliderSlideOneActions onAccept={goToNextSlide} />
diff --git a/src/components/ui/call-result-sheet.tsx b/src/components/ui/call-result-sheet.tsx
index 9606639..4b988f5 100644
--- a/src/components/ui/call-result-sheet.tsx
+++ b/src/components/ui/call-result-sheet.tsx
@@ -121,7 +121,7 @@ export function CallResultSheet({
       <section
         {...props}
         className={[
-          "w-full max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
+          "w-full sm:max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
           isClosing || isEntering ? "translate-y-full" : "translate-y-0",
           className,
         ]
diff --git a/src/components/ui/dismiss-reason-sheet.tsx b/src/components/ui/dismiss-reason-sheet.tsx
index 51404c3..90f57ce 100644
--- a/src/components/ui/dismiss-reason-sheet.tsx
+++ b/src/components/ui/dismiss-reason-sheet.tsx
@@ -119,7 +119,7 @@ export function DismissReasonSheet({
       <section
         {...props}
         className={[
-          "w-full max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
+          "w-full sm:max-w-[375px] rounded-t-[34px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
           isClosing || isEntering ? "translate-y-full" : "translate-y-0",
           className,
         ]
diff --git a/src/components/ui/female-consent-sheet.tsx b/src/components/ui/female-consent-sheet.tsx
index 1a562b8..b370957 100644
--- a/src/components/ui/female-consent-sheet.tsx
+++ b/src/components/ui/female-consent-sheet.tsx
@@ -123,7 +123,7 @@ export function FemaleConsentSheet({
       <section
         {...props}
         className={[
-          "w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] py-5 px-4 text-left shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
+          "w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] py-5 px-4 text-left shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
           isClosing || isEntering ? "translate-y-full" : "translate-y-0",
           className,
         ]
diff --git a/src/components/ui/information-sheet.tsx b/src/components/ui/information-sheet.tsx
index 0acd3d5..92714ea 100644
--- a/src/components/ui/information-sheet.tsx
+++ b/src/components/ui/information-sheet.tsx
@@ -238,7 +238,7 @@ export function InformationSheet({
       <section
         {...props}
         className={[
-          "w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
+          "w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 text-center shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out will-change-transform",
           isClosing || isEntering ? "translate-y-full" : "translate-y-0",
           className,
         ]
diff --git a/src/components/ui/report-actions-sheet.tsx b/src/components/ui/report-actions-sheet.tsx
index bc5d8ac..01d5057 100644
--- a/src/components/ui/report-actions-sheet.tsx
+++ b/src/components/ui/report-actions-sheet.tsx
@@ -101,7 +101,7 @@ export function ReportActionsSheet({ onClose }: ReportActionsSheetProps) {
     >
       <section
         className={[
-          "w-full max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out",
+          "w-full sm:max-w-[375px] rounded-t-[15px] bg-[#F9F8F8] p-3.5 shadow-[0_20px_60px_rgba(15,23,42,0.08)] transition-transform duration-[220ms] ease-out",
           isClosing || isEntering ? "translate-y-full" : "translate-y-0",
         ]
           .filter(Boolean)