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

This commit is contained in:
Rômulo Penido
2025-12-31 20:15:47 -03:00
committed by GitHub
parent 38dfb68286
commit fd0395ba03
2 changed files with 52 additions and 47 deletions

View File

@@ -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>
);
};

View File

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