style(console): split the sie settings and the preview content equally (#2542)

packages/console/src/pages/SignInExperience/components/Preview/index.module.scss

@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .preview {
-  width: 480px;
+  min-width: 480px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -51,6 +51,7 @@
         height: 380px;
         position: relative;
         background: var(--color-surface-1);
+        margin: 0 auto;
 
         iframe {
           width: 960px;

packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss

@@ -44,7 +44,7 @@
       position: relative;
       padding: _.unit(6) _.unit(17);
       // Space for footer
-      padding-bottom: 112px;
+      padding-bottom: 108px;
     }
   }
 
@@ -56,18 +56,13 @@
     .form {
       flex: 1;
 
-      .card {
-        background: var(--color-layer-1);
-        padding: _.unit(2) _.unit(6) _.unit(6);
-        border-radius: 16px;
-
-        &:not(:last-child) {
-          margin-bottom: _.unit(6);
-        }
+      > :not(:first-child) {
+        margin-top: _.unit(3);
       }
     }
 
     .preview {
+      flex: 1;
       margin-left: _.unit(8);
       position: sticky;
       top: _.unit(4);

packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx

@@ -111,19 +111,11 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
               )}
               <div className={styles.main}>
                 <div className={styles.form}>
-                  <div className={styles.card}>
                   <ColorForm />
-                  </div>
-                  <div className={styles.card}>
                   <BrandingForm />
-                  </div>
-                  <div className={styles.card}>
                   <TermsForm />
-                  </div>
-                  <div className={styles.card}>
                   <LanguagesForm />
                 </div>
-                </div>
                 {formData.id && (
                   <Preview signInExperience={previewConfigs} className={styles.preview} />
                 )}

packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss

@@ -1,10 +1,20 @@
 @use '@/scss/underscore' as _;
 
+.container {
+  height: 100%;
+  min-height: 528px;
+  padding-bottom: _.unit(6);
+}
+
 .welcome {
   height: 100%;
   display: flex;
   flex-direction: column;
 
+  .cardTitle {
+    flex-shrink: 0;
+  }
+
   .content {
     flex: 1;
     display: flex;

packages/console/src/pages/SignInExperience/components/Welcome/index.tsx

@@ -22,9 +22,13 @@ const Welcome = ({ mutate }: Props) => {
   const theme = useTheme();
 
   return (
-    <>
+    <div className={styles.container}>
       <Card className={styles.welcome}>
-        <CardTitle title="sign_in_exp.title" subtitle="sign_in_exp.description" />
+        <CardTitle
+          title="sign_in_exp.title"
+          subtitle="sign_in_exp.description"
+          className={styles.cardTitle}
+        />
         <div className={styles.content}>
           {theme === AppearanceMode.LightMode ? <WelcomeImage /> : <WelcomeImageDark />}
           <div className={styles.text}>{t('sign_in_exp.welcome.title')}</div>
@@ -44,7 +48,7 @@ const Welcome = ({ mutate }: Props) => {
           mutate();
         }}
       />
-    </>
+    </div>
   );
 };
 

packages/console/src/pages/SignInExperience/index.module.scss

@@ -33,6 +33,7 @@
       }
 
       .preview {
+        flex: 1;
         position: sticky;
         top: _.unit(4);
         align-self: flex-start;