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