feat: Add a fluid container to allow for limiting the maximum width o…

…f the content (#276) * feat: Add a fluid container to allow for limiting the maximum width of the content --------- Co-authored-by: Stanislav Lunyachek <[email protected]>
openedx · Feb 23, 2024 · 5ba4445 · 5ba4445
1 parent bad8a55
commit 5ba4445
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
@@ -161,18 +161,20 @@ function ProgramCertificatesList({ intl }) {
 
  return (
  <main id="main-content" className="pt-5 pb-5 pl-4 pr-4" tabIndex="-1">
- {renderProfile()}
- <NavigationBar />
- <h1 className="h3 pl-3 pr-3 mb-4">
- {intl.formatMessage(messages.credentialsHeader)}
- </h1>
- {renderData()}
- {renderHelp()}
- <ProgramCertificateModal
- isOpen={modalIsOpen}
- close={closeModal}
- data={verifiableCredentialIssuanceData}
- />
+ <div className="container-fluid">
+ {renderProfile()}
+ <NavigationBar />
+ <h1 className="h3 pl-3 pr-3 mb-4">
+ {intl.formatMessage(messages.credentialsHeader)}
+ </h1>
+ {renderData()}
+ {renderHelp()}
+ <ProgramCertificateModal
+ isOpen={modalIsOpen}
+ close={closeModal}
+ data={verifiableCredentialIssuanceData}
+ />
+ </div>
  </main>
  );
 }

diff --git a/src/components/ProgramRecordsList/ProgramRecordsList.jsx b/src/components/ProgramRecordsList/ProgramRecordsList.jsx
@@ -175,17 +175,19 @@ function ProgramRecordsList() {
 
  return (
  <main id="main-content" className="pt-5 pb-5 pl-4 pr-4" tabIndex="-1">
- {renderProfile()}
- <NavigationBar />
- <h1 className="h3 pl-3 pr-3 mb-4">
- <FormattedMessage
- id="records.header"
- defaultMessage="My Learner Records"
- description="Header for the Learner Records page"
- />
- </h1>
- {renderData()}
- {renderHelp()}
+ <div className="container-fluid">
+ {renderProfile()}
+ <NavigationBar />
+ <h1 className="h3 pl-3 pr-3 mb-4">
+ <FormattedMessage
+ id="records.header"
+ defaultMessage="My Learner Records"
+ description="Header for the Learner Records page"
+ />
+ </h1>
+ {renderData()}
+ {renderHelp()}
+ </div>
  </main>
  );
 }