Fix: auth tunnel responsive fixes

refugies-info · Jan 8, 2025 · 4a0bea8 · 4a0bea8
1 parent 835e7c5
commit 4a0bea8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/apps/client/src/components/Pages/auth/Layout/Layout.module.scss b/apps/client/src/components/Pages/auth/Layout/Layout.module.scss
@@ -81,5 +81,5 @@ $headerHeight: 120px;
 .fixed_illu {
   position: fixed;
   bottom: u(10);
-  left: u(26);
+  left: max(8vw, 10px);
 }
diff --git a/apps/client/src/components/Pages/auth/Layout/Layout.tsx b/apps/client/src/components/Pages/auth/Layout/Layout.tsx
@@ -59,7 +59,7 @@ const Layout = (props: Props) => {
           }
         />
       )}
-      <div className={styles.row}>
+      <div className={cls(!props.fullWidth && styles.row)}>
         <main className={cls(styles.main, props.fullWidth && styles.full_width)}>{props.children}</main>
 
         {!props.fullWidth && (
@@ -81,7 +81,6 @@ const Layout = (props: Props) => {
           </div>
         )}
       </div>
-
       {props.fullWidth && (
         <div className={styles.fixed_illu}>
           <Image src={PersosIllu} width={127} height={200} alt="" />

diff --git a/apps/client/src/scss/components/auth.module.scss b/apps/client/src/scss/components/auth.module.scss
@@ -14,17 +14,23 @@
   }
 
   &.full {
-    width: 720px;
+    max-width: 48rem;
     margin: auto;
 
     .container_inner {
-      padding: 0 u(38);
-      position: relative;
-
-      .back_button {
-        position: absolute;
-        top: 0;
-        left: 0;
+      padding: 0 u(4);
+      margin-bottom: 170px; /* To compensate the illustration height */
+      /* stylelint-disable-next-line media-feature-range-notation */
+      @media (min-width: 48em) {
+        padding: 0 9.5rem;
+        margin-bottom: 0;
+        position: relative;
+
+        .back_button {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
       }
     }
   }