feat: dock buttons to the bottom in import course stepper (#2694)

Author: ChrisChV

src/library-authoring/import-course/index.scss

@@ -17,3 +17,22 @@
 .text-decoration-underline {
   text-decoration: underline;
 }
+
+.import-course-stepper {
+  .import-container {
+    // Calculate all the screen size subtracting the height of the header and title and top/bottom margins
+    min-height: calc(calc(100vh - 60px - 61px) - calc(var(--pgn-spacing-spacer-base) * 6));
+  }
+
+  .content-buttons {
+    width: 100%;
+    position: sticky;
+    bottom: 0;
+  }
+
+  [class*="col-"] {
+    // To avoid create an empty gray space between the main content and the sidebar
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

src/library-authoring/import-course/stepper/ImportStepperPage.tsx

@@ -112,7 +112,7 @@ export const ImportStepperPage = () => {
   }
 
   return (
-    <div className="d-flex">
+    <div className="import-course-stepper d-flex">
       <div className="flex-grow-1">
         <Helmet>
           <title>{libraryData.title} | {process.env.SITE_NAME}</title>
@@ -128,7 +128,7 @@ export const ImportStepperPage = () => {
             size: undefined,
           }}
         />
-        <Container className="mt-4 mb-5">
+        <Container className="mt-4">
           <div className="px-4 bg-light-200 border-bottom">
             <SubHeader
               title={intl.formatMessage(messages.importCourseStepperTitle)}
@@ -137,29 +137,31 @@ export const ImportStepperPage = () => {
           </div>
           <Layout xs={[{ span: 9 }, { span: 3 }]}>
             <Layout.Element>
-              <Stepper activeKey={currentStep}>
-                <Stepper.Header />
-                <Stepper.Step
-                  eventKey="select-course"
-                  title={intl.formatMessage(messages.importCourseSelectCourseStep)}
-                >
-                  <CoursesList
-                    selectedCourseId={selectedCourseId}
-                    handleSelect={setSelectedCourseId}
-                    cardMigrationStatusWidget={MigrationStatus}
-                  />
-                </Stepper.Step>
-                <Stepper.Step
-                  eventKey="review-details"
-                  title={intl.formatMessage(messages.importCourseReviewDetailsStep)}
-                >
-                  <ReviewImportDetails
-                    markAnalysisComplete={setAnalysisCompleted}
-                    courseId={selectedCourseId}
-                  />
-                </Stepper.Step>
-              </Stepper>
-              <div className="mt-4">
+              <div className="import-container px-4">
+                <Stepper activeKey={currentStep}>
+                  <Stepper.Header />
+                  <Stepper.Step
+                    eventKey="select-course"
+                    title={intl.formatMessage(messages.importCourseSelectCourseStep)}
+                  >
+                    <CoursesList
+                      selectedCourseId={selectedCourseId}
+                      handleSelect={setSelectedCourseId}
+                      cardMigrationStatusWidget={MigrationStatus}
+                    />
+                  </Stepper.Step>
+                  <Stepper.Step
+                    eventKey="review-details"
+                    title={intl.formatMessage(messages.importCourseReviewDetailsStep)}
+                  >
+                    <ReviewImportDetails
+                      markAnalysisComplete={setAnalysisCompleted}
+                      courseId={selectedCourseId}
+                    />
+                  </Stepper.Step>
+                </Stepper>
+              </div>
+              <div className="content-buttons mt-5 px-5 py-2 bg-white box-shadow-up-1">
                 {currentStep === 'select-course' ? (
                   <ActionRow className="d-flex justify-content-between">
                     <Button variant="outline-primary" onClick={() => navigate('../import')}>