fix(firstMile): subway nav position fixed (no scroll with page) (#5684)

Author: ChitlangeSahas

src/homepageExperience/components/HomepageExperience.scss

@@ -14,6 +14,12 @@ h1#first-mile--header {
   width: 100%;
 }
 
+.homepage-wizard-container--subway-inner {
+  width: 100%;
+  position: sticky;
+  top: 0;
+}
+
 .homepage-wizard-container--subway {
   display: flex;
   flex-direction: column;

src/homepageExperience/containers/ArduinoWizard.tsx

@@ -181,7 +181,10 @@ export class ArduinoWizard extends PureComponent<{}, State> {
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">
             <aside className="homepage-wizard-container--subway">
-              <div style={{width: '100%'}} data-testid="subway-nav">
+              <div
+                className="homepage-wizard-container--subway-inner"
+                data-testid="subway-nav"
+              >
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}

src/homepageExperience/containers/CliWizard.tsx

@@ -177,7 +177,10 @@ export class CliWizard extends PureComponent<{}, State> {
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">
             <aside className="homepage-wizard-container--subway">
-              <div style={{width: '100%'}} data-testid="subway-nav">
+              <div
+                className="homepage-wizard-container--subway-inner"
+                data-testid="subway-nav"
+              >
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}

src/homepageExperience/containers/GoWizard.tsx

@@ -180,7 +180,7 @@ export class GoWizard extends PureComponent<null, State> {
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">
             <aside className="homepage-wizard-container--subway">
-              <div style={{width: '100%'}}>
+              <div className="homepage-wizard-container--subway-inner">
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}

src/homepageExperience/containers/NodejsWizard.tsx

@@ -181,7 +181,7 @@ export class NodejsWizard extends PureComponent<null, State> {
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">
             <aside className="homepage-wizard-container--subway">
-              <div style={{width: '100%'}}>
+              <div className="homepage-wizard-container--subway-inner">
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}

src/homepageExperience/containers/PythonWizard.tsx

@@ -183,7 +183,10 @@ export class PythonWizard extends PureComponent<null, State> {
         <Page.Contents scrollable={true}>
           <div className="homepage-wizard-container">
             <aside className="homepage-wizard-container--subway">
-              <div style={{width: '100%'}} data-testid="subway-nav">
+              <div
+                className="homepage-wizard-container--subway-inner"
+                data-testid="subway-nav"
+              >
                 <SubwayNav
                   currentStep={this.state.currentStep}
                   onStepClick={this.handleNavClick}