fix: make sidebar (and content) fill the whole page (#2777)

Author: rpenido

src/library-authoring/import-course/CourseImportHomePage.tsx

@@ -55,53 +55,51 @@ export const CourseImportHomePage = () => {
   }
 
   return (
-    <div className="d-flex">
-      <div className="flex-grow-1">
-        <Helmet>
-          <title>{libraryData.title} | {process.env.SITE_NAME}</title>
-        </Helmet>
-        <Header
-          number={libraryData.slug}
-          title={libraryData.title}
-          org={libraryData.org}
-          contextId={libraryId}
-          isLibrary
-          readOnly={readOnly}
-          containerProps={{
-            size: undefined,
-          }}
-        />
-        <Container className="mt-4 mb-5">
-          <div className="px-4 bg-light-200 border-bottom">
-            <SubHeader
-              title={intl.formatMessage(messages.pageTitle)}
-              subtitle={intl.formatMessage(messages.pageSubtitle)}
-              hideBorder
-              headerActions={<ImportCourseButton />}
-            />
-          </div>
-          <Layout xs={[{ span: 9 }, { span: 3 }]}>
-            <Layout.Element>
-              {courseImports.length ? (
-                <Stack gap={3} className="pl-4 mt-4">
-                  <h3>
-                    <FormattedMessage {...messages.courseImportPreviousImports} />
-                  </h3>
-                  {courseImports.map((courseImport) => (
-                    <ImportedCourseCard
-                      key={courseImport.source.key}
-                      courseImport={courseImport}
-                    />
-                  ))}
-                </Stack>
-              ) : (<EmptyState />)}
-            </Layout.Element>
-            <Layout.Element>
-              <HelpSidebar />
-            </Layout.Element>
-          </Layout>
-        </Container>
-      </div>
+    <div className="d-flex flex-column vh-100 course-import">
+      <Helmet>
+        <title>{libraryData.title} | {process.env.SITE_NAME}</title>
+      </Helmet>
+      <Header
+        number={libraryData.slug}
+        title={libraryData.title}
+        org={libraryData.org}
+        contextId={libraryId}
+        isLibrary
+        readOnly={readOnly}
+        containerProps={{
+          size: undefined,
+        }}
+      />
+      <Container className="mt-4 d-flex flex-column flex-grow-1">
+        <div className="px-4 bg-light-200 border-bottom">
+          <SubHeader
+            title={intl.formatMessage(messages.pageTitle)}
+            subtitle={intl.formatMessage(messages.pageSubtitle)}
+            hideBorder
+            headerActions={<ImportCourseButton />}
+          />
+        </div>
+        <Layout xs={[{ span: 9 }, { span: 3 }]}>
+          <Layout.Element>
+            {courseImports.length ? (
+              <Stack gap={3} className="pl-4 mt-4">
+                <h3>
+                  <FormattedMessage {...messages.courseImportPreviousImports} />
+                </h3>
+                {courseImports.map((courseImport) => (
+                  <ImportedCourseCard
+                    key={courseImport.source.key}
+                    courseImport={courseImport}
+                  />
+                ))}
+              </Stack>
+            ) : (<EmptyState />)}
+          </Layout.Element>
+          <Layout.Element>
+            <HelpSidebar />
+          </Layout.Element>
+        </Layout>
+      </Container>
     </div>
   );
 };

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

@@ -36,3 +36,10 @@
     padding-left: 0;
   }
 }
+
+.course-import {
+  .row {
+    // Make the row grow to fill the remaining vertial space
+    flex-grow: 1;
+  }
+}