From 219e6fb466afe2e89c8b3599660d9dff5460feb4 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 1 Aug 2024 19:51:25 +0200
Subject: [PATCH] fix: onboarding page layout on small screens

---
 .../SetupSubscription.module.scss             |  1 +
 .../SetupSubscription/SubscriptionPlans.tsx   |  2 +-
 packages/webapp/src/style/App.scss            |  2 +-
 .../src/style/pages/Setup/SetupPage.scss      | 63 +++++++------------
 4 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss b/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss
index 7a3087aa0f..f31317e0f8 100644
--- a/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss
@@ -2,6 +2,7 @@
 .root{
   margin: 0 auto;
   padding: 0 40px;
+  padding-right: 20px;
 }
 
 .periodSwitch {
diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx
index 7fa489f0e8..6fde58c758 100644
--- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx
+++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx
@@ -6,7 +6,7 @@ export function SubscriptionPlans() {
   const subscriptionPlans = useSubscriptionPlans();
 
   return (
-    <Group spacing={14} noWrap align="stretch">
+    <Group spacing={10} noWrap align="stretch">
       {subscriptionPlans.map((plan, index) => (
         <SubscriptionPlan
           key={index}
diff --git a/packages/webapp/src/style/App.scss b/packages/webapp/src/style/App.scss
index 55a749fb72..77b84363b4 100644
--- a/packages/webapp/src/style/App.scss
+++ b/packages/webapp/src/style/App.scss
@@ -39,7 +39,7 @@
 @import "section";
 
 .App {
-  min-width: 960px;
+  min-width: 1100px;
 }
 
 // =======
diff --git a/packages/webapp/src/style/pages/Setup/SetupPage.scss b/packages/webapp/src/style/pages/Setup/SetupPage.scss
index 9ef61f2e9a..2bfa0bfe40 100644
--- a/packages/webapp/src/style/pages/Setup/SetupPage.scss
+++ b/packages/webapp/src/style/pages/Setup/SetupPage.scss
@@ -1,36 +1,25 @@
 @import "../../_base.scss";
 
 .setup-page {
+  display: grid;
+  grid-template-columns: 40% 60%;
   max-width: 1600px;
+  min-height: 100vh;
+
+  @media only screen and (max-width: 1500px) {
+    grid-template-columns: 35% 65%;
+  }
+  @media only screen and (max-width: 1200px) {
+    grid-template-columns: 26% 74%;
+  }
 
   &__right-section {
-    display: flex;
-    flex-direction: row;
     width: 100%;
-
-    &:before {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 1px;
-      max-width: 600px;
-      min-width: 600px;
-
-      @media only screen and (max-width: 1500px) {
-        min-width: 500px;
-        max-width: 500px;
-      }
-
-      @media only screen and (max-width: 1024px) {
-        min-width: 400px;
-        max-width: 400px;
-      }
-    }
+    overflow: auto;
 
     h1 {
       font-size: 22px;
     }
-
     h1,
     h3 {
       font-weight: 500;
@@ -44,22 +33,9 @@
   }
 
   &__left-section {
-    position: fixed;
     background-color: #2f3d6f;
-    overflow: auto;
     z-index: 1;
-    height: 100%;
     width: 100%;
-    left: 0;
-    top: 0;
-    width: 600px;
-
-    @media only screen and (max-width: 1500px) {
-      width: 500px;
-    }
-    @media only screen and (max-width: 1024px) {
-      width: 400px;
-    }
 
     .content {
       display: flex;
@@ -76,6 +52,11 @@
         padding-left: 10px;
       }
 
+      &__header{
+        position: sticky;
+        top: 0;
+      }
+
       &__title {
         font-size: 50px;
         font-weight: 100;
@@ -84,8 +65,8 @@
         margin-top: 14px;
         color: rgba(255, 255, 255, 0.75);
 
-        @media only screen and (max-width: 1024px) {
-          font-size: 45px;
+        @media only screen and (max-width: 1200px) {
+          font-size: 36px;
         }
       }
 
@@ -111,16 +92,20 @@
 
       &__footer {
         margin-top: auto;
+        position: sticky;
+        bottom: 20px;
       }
 
       &__links {
         text-align: left;
         opacity: 0.65;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        flex-wrap: wrap;
 
         >div {
           font-size: 13px;
-          margin-right: 15px;
-          display: inline;
 
           a {
             color: #fff;