feat: update layout and styling for responsive design across multiple components

2 months ago · ad121581d3
12 changed files with 17 additions and 70 deletions
--- 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>
--- 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;
 }
--- 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}
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@ -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>
-  );
-}
--- 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"
--- 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}
--- 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} />
--- 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,
        ]
--- 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,
        ]
--- 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,
        ]
--- 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,
        ]
--- 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)