fix (onboard): CSS fix to handle overflow during on-boarding process.

src/views/on-board/DataUploader.module.scss

@@ -20,6 +20,7 @@
 @use '@carbon/colors' as *;
 
 .root {
+  margin-top: $spacing-05;
   height: 100%;
   width: 100%;
   display: flex;

src/views/on-board/DataVerification.module.scss

@@ -20,13 +20,14 @@
 @use '@carbon/colors' as *;
 
 .root {
-  margin-top: $spacing-09;
+  margin-top: $spacing-05;
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   row-gap: $spacing-05;
   justify-content: flex-end;
+  overflow-y: auto;
 }
 
 .title {
@@ -56,34 +57,33 @@
   height: 70%;
   display: flex;
   flex-direction: column;
+  overflow: auto;
 }
 
-.navigationButtons {
+.navigationContainer {
   margin-top: auto;
   margin-bottom: $spacing-09;
   display: flex;
-  column-gap: $spacing-05;
+  flex-direction: column;
 }
 
-.visualizeButton {
-  margin-top: auto;
-  margin-bottom: $spacing-09;
+.navigationButtons {
+  display: flex;
+  column-gap: $spacing-05;
 }
 
 .warningContainer {
-  margin: $spacing-09 0;
+  margin-bottom: $spacing-03;
   display: flex;
-  column-gap: $spacing-04;
-  justify-content: center;
-  align-items: center;
+  column-gap: $spacing-03;
 }
 
 .warningContainerIcon {
-  color: $gray-40;
+  color: var(--cds-support-warning);
 }
 
 .warningContainerText {
-  font-size: 20px;
-  line-height: 24px;
-  color: $gray-40;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--cds-support-warning);
 }

src/views/on-board/DataVerification.tsx

@@ -212,37 +212,39 @@ export default memo(function DataVerificationView({
               )}
             </>
           )}
-          {exampleData.tasks.length > 500 ? (
-            <div className={classes.warningContainer}>
-              <WarningAlt
-                height={'32px'}
-                width={'32px'}
-                className={classes.warningContainerIcon}
-              />
-              <span className={classes.warningContainerText}>
-                {`It might take us a moment to get everything ready once you click the "visualize" button`}
-              </span>
+
+          <div className={classes.navigationContainer}>
+            {exampleData.tasks.length > 500 ? (
+              <div className={classes.warningContainer}>
+                <WarningAlt
+                  className={classes.warningContainerIcon}
+                  size={18}
+                />
+                <span className={classes.warningContainerText}>
+                  {`Due to high number of data points, it might take us a moment to get everything ready once you click the "visualize" button.`}
+                </span>
+              </div>
+            ) : null}
+            <div className={classes.navigationButtons}>
+              <Button
+                kind="secondary"
+                renderIcon={ArrowLeft}
+                iconDescription="Return to uploading data"
+                onClick={onPrev}
+              >
+                Return to uploading data
+              </Button>
+              <Button
+                disabled={!exampleData}
+                renderIcon={ArrowRight}
+                iconDescription="Proceed"
+                onClick={() => {
+                  onNext(exampleData);
+                }}
+              >
+                Visualize
+              </Button>
             </div>
-          ) : null}
-          <div className={classes.navigationButtons}>
-            <Button
-              kind="secondary"
-              renderIcon={ArrowLeft}
-              iconDescription="Return to uploading data"
-              onClick={onPrev}
-            >
-              Return to uploading data
-            </Button>
-            <Button
-              disabled={!exampleData}
-              renderIcon={ArrowRight}
-              iconDescription="Proceed"
-              onClick={() => {
-                onNext(exampleData);
-              }}
-            >
-              Visualize
-            </Button>
           </div>
         </>
       ) : null}

src/views/on-board/Instructions.module.scss

@@ -20,6 +20,7 @@
 @use '@carbon/colors' as *;
 
 .root {
+  margin-top: $spacing-05;
   height: 100%;
   width: 100%;
   display: flex;

src/views/on-board/Onboard.module.scss

@@ -34,8 +34,6 @@
 
 .progressTracker {
   margin-top: $spacing-05;
-  margin-left: $spacing-03;
-  height: $spacing-12;
 }
 
 .reconfigureBanner {

src/views/on-board/Onboard.tsx

@@ -81,7 +81,6 @@ export default memo(function OnboardingView({ onVisualize }: Props) {
           <ProgressStep
             disabled={!rawData}
             label="3. Verify data"
-            secondaryLabel="Verify data for any formatting issues"
           ></ProgressStep>
         </ProgressIndicator>
       </div>