From 6be385e0b0276e0a014ee910bbc08eab06fdf482 Mon Sep 17 00:00:00 2001
From: Stanislav Lunyachek <lunyachek@MacBook-Pro-M1.local>
Date: Wed, 7 Feb 2024 00:45:47 +0200
Subject: [PATCH 1/2] feat: Add a fluid container to allow for limiting the
 maximum width of the content

---
 .../ProgramCertificatesList.jsx               | 28 ++++++++++---------
 .../ProgramRecordsList/ProgramRecordsList.jsx | 26 +++++++++--------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
index 86fba92..ca53ae7 100644
--- a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
+++ b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
@@ -160,19 +160,21 @@ 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}
-      />
+    <main id="main-content" className="pt-5 pb-5" tabIndex="-1">
+      <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
index 9da2ba4..0b0ab70 100644
--- a/src/components/ProgramRecordsList/ProgramRecordsList.jsx
+++ b/src/components/ProgramRecordsList/ProgramRecordsList.jsx
@@ -174,18 +174,20 @@ 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()}
+    <main id="main-content" className="pt-5 pb-5" tabIndex="-1">
+      <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>
   );
 }

From 5f95f71dd948b7cb4f5ad385697e8fefc9cdc80b Mon Sep 17 00:00:00 2001
From: Stanislav Lunyachek <stanislav.lunyachek@raccoongang.com>
Date: Fri, 23 Feb 2024 19:49:40 +0200
Subject: [PATCH 2/2] feat: After review

---
 .../ProgramCertificatesList/ProgramCertificatesList.jsx         | 2 +-
 src/components/ProgramRecordsList/ProgramRecordsList.jsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
index ca53ae7..7e35097 100644
--- a/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
+++ b/src/components/ProgramCertificatesList/ProgramCertificatesList.jsx
@@ -160,7 +160,7 @@ function ProgramCertificatesList({ intl }) {
   );
 
   return (
-    <main id="main-content" className="pt-5 pb-5" tabIndex="-1">
+    <main id="main-content" className="pt-5 pb-5 pl-4 pr-4" tabIndex="-1">
       <div className="container-fluid">
         {renderProfile()}
         <NavigationBar />
diff --git a/src/components/ProgramRecordsList/ProgramRecordsList.jsx b/src/components/ProgramRecordsList/ProgramRecordsList.jsx
index 0b0ab70..ce89b0a 100644
--- a/src/components/ProgramRecordsList/ProgramRecordsList.jsx
+++ b/src/components/ProgramRecordsList/ProgramRecordsList.jsx
@@ -174,7 +174,7 @@ function ProgramRecordsList() {
   );
 
   return (
-    <main id="main-content" className="pt-5 pb-5" tabIndex="-1">
+    <main id="main-content" className="pt-5 pb-5 pl-4 pr-4" tabIndex="-1">
       <div className="container-fluid">
         {renderProfile()}
         <NavigationBar />