From a861f9fdff3ce3682eca8c957bfa4cf4e646e90a Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Fri, 8 Jul 2022 18:55:32 +0800
Subject: [PATCH] refactor(console): stick sie tutorial topbar (#1490)

---
 .../components/GuideModal.module.scss         | 19 +++++++++++----
 .../components/GuideModal.tsx                 | 24 +++++++++----------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/components/GuideModal.module.scss b/packages/console/src/pages/SignInExperience/components/GuideModal.module.scss
index 29a43a37c..bdf86b968 100644
--- a/packages/console/src/pages/SignInExperience/components/GuideModal.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/GuideModal.module.scss
@@ -2,10 +2,12 @@
 
 .container {
   background-color: var(--color-surface-1);
+  display: flex;
+  flex-direction: column;
   height: 100vh;
-  overflow-y: auto;
 
   .header {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     background-color: var(--color-layer-1);
@@ -28,15 +30,22 @@
   }
 
   .content {
-    padding: _.unit(6) _.unit(17);
-    // Space for footer
-    padding-bottom: 112px;
-    position: relative;
+    flex: 1;
+    overflow-y: auto;
+    flex-direction: column;
+    align-items: center;
 
     .reminder {
       width: 550px;
       margin: 0 auto _.unit(8);
     }
+
+    > .form {
+      position: relative;
+      padding: _.unit(6) _.unit(17);
+      // Space for footer
+      padding-bottom: 112px;
+    }
   }
 
   .main {
diff --git a/packages/console/src/pages/SignInExperience/components/GuideModal.tsx b/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
index 63ff10146..e0886c2d5 100644
--- a/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
@@ -100,19 +100,19 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
           />
         </div>
         <div className={styles.content}>
-          {!preferences.experienceNoticeConfirmed && (
-            <div className={styles.reminder}>
-              <Alert
-                action="admin_console.sign_in_exp.welcome.got_it"
-                variant="shadow"
-                onClick={onGotIt}
-              >
-                {t('sign_in_exp.welcome.apply_remind')}
-              </Alert>
-            </div>
-          )}
           <FormProvider {...methods}>
-            <form onSubmit={onSubmit}>
+            <form className={styles.form} onSubmit={onSubmit}>
+              {!preferences.experienceNoticeConfirmed && (
+                <div className={styles.reminder}>
+                  <Alert
+                    action="admin_console.sign_in_exp.welcome.got_it"
+                    variant="shadow"
+                    onClick={onGotIt}
+                  >
+                    {t('sign_in_exp.welcome.apply_remind')}
+                  </Alert>
+                </div>
+              )}
               <div className={styles.main}>
                 <div className={styles.form}>
                   <div className={styles.card}>