fix onboarding scrollbars (#12408)

ui/src/onboarding/OnboardingWizard.scss

@@ -24,7 +24,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   width: 100%;
-  flex: .5;
+  flex: 0.5;
 
   &.primary {
     background-image: url('../../assets/images/cubo_doodle.svg');
@@ -61,8 +61,7 @@
   background-color: $g3-castle;
   border-radius: $radius;
   padding: $ix-marg-c;
-  padding-bottom: 0;
+  flex: 1 0 0;
-  flex: 1 0 100%;
 }
 
 .side-bar.show + .wizard-step--container {
@@ -84,30 +83,22 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-}
 
-.wizard-step--scroll-area {
+  .form--wrapper {
-  display: block;
+    display: inline-flex;
-  position: absolute;
+    flex-direction: column;
-  left: 0;
+    flex: 1 0 0;
-  right: 0;
-  height: calc(100% - 102px);
-  border: $ix-border solid $g5-pepper;
-  border-radius: $ix-radius;
-}
-
-
-.buttonless {
-  .wizard-step--scroll-area {
-    height: calc(100% - 16px);
   }
 }
 
+.wizard-step--scroll-area {
+  flex: 1 0 0;
+  width: 100%;
+}
 
 .wizard-step--scroll-content {
-  width: 100%;
+  width: 90%;
-  max-width: 90%;
+  height: 90%;
-  min-height: 100%;
   margin: 0 auto $ix-marg-d auto;
   display: inline-flex;
   flex-direction: column;
@@ -126,26 +117,6 @@
 }
 
 /* Buttons */
-.wizard--button-container {
-  position: absolute;
-  bottom: $ix-marg-d;
-  left: 0;
-  right: 0;
-  display: inline-flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  
-  .wizard--skip-container {
-    width: 100%;
-    display: inline-flex;
-    justify-content: center;
-      
-    .button {
-      margin: $ix-marg-b 0 0 0;
-    }
-  }
-}
-
 .wizard--button-bar {
   display: inline-flex;
   flex-shrink: 0;
@@ -155,6 +126,7 @@
   height: auto;
   flex-wrap: nowrap;
   flex: 2;
+  margin-top: $ix-marg-b;
 
   .button {
     position: relative;
@@ -256,7 +228,7 @@
   font-family: 'RobotoMono', monospace;
 }
 
-.wizard-step--body-copybutton{
+.wizard-step--body-copybutton {
   margin-left: 10px;
 }
 
@@ -309,26 +281,12 @@
 @media screen and (min-width: $grid--breakpoint-md) {
   .wizard-step--container {
     padding: $ix-marg-d;
-    padding-bottom: 0;
-  }
-
-  .wizard--button-container {
-    .wizard--skip-container {
-      width: auto;
-      flex: 1;
-      justify-content: flex-end;
-      
-      .button {
-        margin: 0 0 0 $ix-marg-a;
-      }
-    }
   }
 
   .onboarding-step {
     max-width: 60vw;
   }
 
-
   .buttonless {
     .wizard-step--scroll-area {
       height: calc(100% - 32px);

ui/src/onboarding/components/CompletionStep.tsx

@@ -51,7 +51,7 @@ class CompletionStep extends PureComponent<Props> {
     const {onExit} = this.props
 
     return (
-      <div className="onboarding-step buttonless">
+      <div className="onboarding-step">
         <div className="wizard-step--scroll-area">
           <FancyScrollbar autoHide={false}>
             <div className="wizard-step--scroll-content">

ui/src/onboarding/components/OnboardingButtons.tsx

@@ -73,7 +73,7 @@ class OnboardingButtons extends PureComponent<Props> {
   }
 
   private get className(): string {
-    return this.props.className || 'wizard--button-container'
+    return this.props.className || ''
   }
 
   private get backButton(): JSX.Element {

ui/src/onboarding/components/OtherStep.tsx

@@ -25,22 +25,20 @@ class OtherStep extends PureComponent<OnboardingStepProps, null> {
       <div className="onboarding-step">
         <h3 className="wizard-step--title">This is Another Step</h3>
         <h5 className="wizard-step--sub-title">Import data here</h5>
-        <div className="wizard--button-container">
+        <div className="wizard--button-bar">
-          <div className="wizard--button-bar">
+          <Button
-            <Button
+            color={ComponentColor.Default}
-              color={ComponentColor.Default}
+            text="Back"
-              text="Back"
+            size={ComponentSize.Medium}
-              size={ComponentSize.Medium}
+            onClick={this.props.onDecrementCurrentStepIndex}
-              onClick={this.props.onDecrementCurrentStepIndex}
+          />
-            />
+          <Button
-            <Button
+            color={ComponentColor.Primary}
-              color={ComponentColor.Primary}
+            text="Next"
-              text="Next"
+            size={ComponentSize.Medium}
-              size={ComponentSize.Medium}
+            onClick={this.handleNext}
-              onClick={this.handleNext}
+            titleText={'Next'}
-              titleText={'Next'}
+          />
-            />
-          </div>
         </div>
       </div>
     )

ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Onboarding.Components.CompletionStep renders 1`] = `
 <div
-  className="onboarding-step buttonless"
+  className="onboarding-step"
 >
   <div
     className="wizard-step--scroll-area"