From c585144d5878c924dac982455de0cef9509808b9 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Fri, 6 Sep 2024 08:11:22 +0530
Subject: [PATCH 1/9] commit01

---
 index.html | 29 ++++++++++++++++++++++++-----
 style.css  | 11 ++++++++++-
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index aea4c8e4..d8be6de1 100644
--- a/index.html
+++ b/index.html
@@ -85,14 +85,22 @@
       >
         Create Goals
       </a>
-      <a class="action-button" href="/task/index.html"> Create Tasks </a>
-      <a class="action-button" href="/profile/index.html"> Profile </a>
+      
+      <a class="action-button" href="/task/index.html"> Create Tasks 
+        <div class="description">Define and assign tasks, create new tasks,
+           set deadlines and track the progress.</div>
+      </a>
+      <a class="action-button" href="/profile/index.html"> Profile 
+        <div class="description">View and edit your personal profile information.</div>
+      </a>
       <a
         id="discord-user-link"
         class="action-button"
         href="/users/discord/index.html"
       >
         Discord Users
+        <div class="description">Manage Discord user roles and activities.</div>
+
       </a>
       <a
         id="user-management-link"
@@ -123,11 +131,20 @@
       </a>
       <a href="/online-members/online-members.html" class="action-button">
         Online Members
+        <div class="description">View the list of currently online members.</div>
+
+      </a>
+      <a class="action-button" href="/groups/index.html"> Discord Groups  
+         <div class="description">Manage Discord group memberships.</div>
+      </a>
+      <a class="action-button" href="/standup/index.html"> Standup Updates
+        <div class="description">Post and view daily standup updates.</div>
+
       </a>
-      <a class="action-button" href="/groups/index.html"> Discord Groups </a>
-      <a class="action-button" href="/standup/index.html"> Standup Updates</a>
       <a class="action-button" href="/identity-service-logs/index.html"
-        >Identity Service Logs</a
+        >Identity Service Logs 
+        <div class="description">Review logs related to identity services.</div>
+        </a
       >
       <a
         class="action-button element-display-remove"
@@ -138,6 +155,8 @@
       >
       <a id="application-button" href="/applications" class="action-button">
         Applications
+        <div class="description">Manage and review submitted applications.</div>
+
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
         <button id="repo-sync-button" class="action-button">
diff --git a/style.css b/style.css
index 96022dea..3f4b41e8 100644
--- a/style.css
+++ b/style.css
@@ -99,8 +99,9 @@ footer {
 }
 
 .action-button {
+  width: 350px;
   color: var(--black-color);
-  font-weight: 500;
+  font-weight: 1000;
   font-size: larger;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
@@ -119,6 +120,14 @@ footer {
   border-color: var(--blue-color);
 }
 
+
+.description{
+  margin-top: 5px;
+  font-weight: 50;
+  font-size:medium;
+
+}
+
 #sync-buttons.element-display-remove {
   display: none;
 }

From 6b0f3db99af3210a7e6e71e50103ad9300382eda Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Fri, 6 Sep 2024 22:24:13 +0530
Subject: [PATCH 2/9] commit2

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index d8be6de1..ebf4096a 100644
--- a/index.html
+++ b/index.html
@@ -87,8 +87,8 @@
       </a>
       
       <a class="action-button" href="/task/index.html"> Create Tasks 
-        <div class="description">Define and assign tasks, create new tasks,
-           set deadlines and track the progress.</div>
+        <div class="description">Define the tasks, create new tasks 
+          and track the progress.</div>
       </a>
       <a class="action-button" href="/profile/index.html"> Profile 
         <div class="description">View and edit your personal profile information.</div>

From 8a48afe5302ecbbb9360f7a559ba6605c33064af Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Sat, 7 Sep 2024 19:03:50 +0530
Subject: [PATCH 3/9] commit03

---
 style.css | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 3f4b41e8..f07be08a 100644
--- a/style.css
+++ b/style.css
@@ -245,11 +245,27 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 600px) {
+/* @media only screen and (max-width: 600px) {
   .buttonSection {
     flex-direction: column;
   }
   .action-button {
     text-align: center;
   }
-}
+} */
+
+
+@media only screen and (max-width: 600px) {
+
+  .buttonSection{
+    flex-direction: column;
+    height: auto;
+    padding: 15px;
+  }
+  .action-button{
+    text-align: center;
+    width: 100%;
+    padding: 10px;
+    font-size: medium
+  }
+}
\ No newline at end of file

From 39b7b98204589a995cdd1e93498ad42bf4a37dfe Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Sun, 8 Sep 2024 10:25:42 +0530
Subject: [PATCH 4/9] Run prettier command

---
 index.html | 38 +++++++++++++++++++++-----------------
 style.css  | 16 ++++++----------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index ebf4096a..891e9b2c 100644
--- a/index.html
+++ b/index.html
@@ -85,13 +85,18 @@
       >
         Create Goals
       </a>
-      
-      <a class="action-button" href="/task/index.html"> Create Tasks 
-        <div class="description">Define the tasks, create new tasks 
-          and track the progress.</div>
+
+      <a class="action-button" href="/task/index.html">
+        Create Tasks
+        <div class="description">
+          Define the tasks, create new tasks and track the progress.
+        </div>
       </a>
-      <a class="action-button" href="/profile/index.html"> Profile 
-        <div class="description">View and edit your personal profile information.</div>
+      <a class="action-button" href="/profile/index.html">
+        Profile
+        <div class="description">
+          View and edit your personal profile information.
+        </div>
       </a>
       <a
         id="discord-user-link"
@@ -100,7 +105,6 @@
       >
         Discord Users
         <div class="description">Manage Discord user roles and activities.</div>
-
       </a>
       <a
         id="user-management-link"
@@ -131,21 +135,22 @@
       </a>
       <a href="/online-members/online-members.html" class="action-button">
         Online Members
-        <div class="description">View the list of currently online members.</div>
-
+        <div class="description">
+          View the list of currently online members.
+        </div>
       </a>
-      <a class="action-button" href="/groups/index.html"> Discord Groups  
-         <div class="description">Manage Discord group memberships.</div>
+      <a class="action-button" href="/groups/index.html">
+        Discord Groups
+        <div class="description">Manage Discord group memberships.</div>
       </a>
-      <a class="action-button" href="/standup/index.html"> Standup Updates
+      <a class="action-button" href="/standup/index.html">
+        Standup Updates
         <div class="description">Post and view daily standup updates.</div>
-
       </a>
       <a class="action-button" href="/identity-service-logs/index.html"
-        >Identity Service Logs 
+        >Identity Service Logs
         <div class="description">Review logs related to identity services.</div>
-        </a
-      >
+      </a>
       <a
         class="action-button element-display-remove"
         href="/feed/index.html"
@@ -156,7 +161,6 @@
       <a id="application-button" href="/applications" class="action-button">
         Applications
         <div class="description">Manage and review submitted applications.</div>
-
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
         <button id="repo-sync-button" class="action-button">
diff --git a/style.css b/style.css
index f07be08a..27e4da4c 100644
--- a/style.css
+++ b/style.css
@@ -120,12 +120,10 @@ footer {
   border-color: var(--blue-color);
 }
 
-
-.description{
+.description {
   margin-top: 5px;
   font-weight: 50;
-  font-size:medium;
-
+  font-size: medium;
 }
 
 #sync-buttons.element-display-remove {
@@ -254,18 +252,16 @@ footer {
   }
 } */
 
-
 @media only screen and (max-width: 600px) {
-
-  .buttonSection{
+  .buttonSection {
     flex-direction: column;
     height: auto;
     padding: 15px;
   }
-  .action-button{
+  .action-button {
     text-align: center;
     width: 100%;
     padding: 10px;
-    font-size: medium
+    font-size: medium;
   }
-}
\ No newline at end of file
+}

From 155495d2ec646e7ab71e20b332ffb810644931c0 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Wed, 11 Sep 2024 10:52:53 +0530
Subject: [PATCH 5/9] fixed Errors in home.test.js

---
 __tests__/home/home.test.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/__tests__/home/home.test.js b/__tests__/home/home.test.js
index 76333d73..47353890 100644
--- a/__tests__/home/home.test.js
+++ b/__tests__/home/home.test.js
@@ -348,7 +348,9 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
-    expect(trimmedDiscordUsersButtonText).toBe('Discord Users');
+    expect(trimmedDiscordUsersButtonText).toBe(
+      'Discord Users\nManage Discord user roles and activities.',
+    );
   });
 
   it('should display the User Management anchor button', async () => {
@@ -529,7 +531,9 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
-    expect(trimmedApplicationButtonText).toBe('Applications');
+    expect(trimmedApplicationButtonText).toBe(
+      'Applications\nManage and review submitted applications.',
+    );
   });
 
   it('should close hamburger menu on clicking anywhere on the screen except the menu', async () => {

From 9bbc573e2d9802b84cbeb4f4e326b01e839adf7c Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Thu, 12 Sep 2024 07:56:39 +0530
Subject: [PATCH 6/9] fixed the responsiveness of dashboard

---
 index.html | 12 +++++++++++-
 style.css  |  5 +++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 891e9b2c..55c5c8b1 100644
--- a/index.html
+++ b/index.html
@@ -84,6 +84,9 @@
         id="create-goal"
       >
         Create Goals
+        <div class="description">
+          Set and track goals to align efforts and measure progress.
+        </div>
       </a>
 
       <a class="action-button" href="/task/index.html">
@@ -118,6 +121,9 @@
         class="action-button element-display-remove"
         href="/requests/index.html"
         >Requests
+        <div class="description">
+          Manage requests for various resources and services.
+        </div>
       </a>
       <a
         id="extension-requests-link"
@@ -156,7 +162,10 @@
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        Activity Feed</a
+        Activity Feed
+        <div class="description">
+          View updates on activities and project progress.
+        </div></a
       >
       <a id="application-button" href="/applications" class="action-button">
         Applications
@@ -166,6 +175,7 @@
         <button id="repo-sync-button" class="action-button">
           <span class="spinner"></span>
           Sync Repo
+          <div class="description">Sync repository to update the changes</div>
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">
diff --git a/style.css b/style.css
index 27e4da4c..c45a526d 100644
--- a/style.css
+++ b/style.css
@@ -30,6 +30,7 @@ body {
 }
 
 .buttonSection {
+  margin-top: 10px;
   height: 80vh;
   display: flex;
   justify-content: center;
@@ -122,7 +123,7 @@ footer {
 
 .description {
   margin-top: 5px;
-  font-weight: 50;
+  font-weight: 500;
   font-size: medium;
 }
 
@@ -252,7 +253,7 @@ footer {
   }
 } */
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1105px) {
   .buttonSection {
     flex-direction: column;
     height: auto;

From 9bf4790a8d35d40215f80a2c9da8ae5f7981ea83 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Sun, 15 Sep 2024 15:18:17 +0530
Subject: [PATCH 7/9] fixed the font weight of description and title

---
 style.css | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/style.css b/style.css
index c45a526d..4f5246b9 100644
--- a/style.css
+++ b/style.css
@@ -102,8 +102,8 @@ footer {
 .action-button {
   width: 350px;
   color: var(--black-color);
-  font-weight: 1000;
-  font-size: larger;
+  font-weight: 600;
+  font-size: 1.1rem;
   background-color: var(--white-color);
   border: 2px solid var(--black-color);
   border-radius: 5px;
@@ -122,9 +122,10 @@ footer {
 }
 
 .description {
-  margin-top: 5px;
-  font-weight: 500;
-  font-size: medium;
+  margin-top: 0.6rem;
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
 }
 
 #sync-buttons.element-display-remove {
@@ -244,15 +245,6 @@ footer {
   display: none !important;
 }
 
-/* @media only screen and (max-width: 600px) {
-  .buttonSection {
-    flex-direction: column;
-  }
-  .action-button {
-    text-align: center;
-  }
-} */
-
 @media only screen and (max-width: 1105px) {
   .buttonSection {
     flex-direction: column;

From 5968a4066d7067d166f6f2552435f067ea9cc1f8 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Wed, 18 Sep 2024 22:05:14 +0530
Subject: [PATCH 8/9] fixed the dashboard buttons design

---
 __tests__/home/home.test.js |   6 ++-
 index.html                  | 100 ++++++++++++++++++------------------
 style.css                   |  32 +++++++++++-
 3 files changed, 85 insertions(+), 53 deletions(-)

diff --git a/__tests__/home/home.test.js b/__tests__/home/home.test.js
index 47353890..e8896f7b 100644
--- a/__tests__/home/home.test.js
+++ b/__tests__/home/home.test.js
@@ -348,8 +348,9 @@ describe('Home Page', () => {
       discordUsersButton,
     );
     const trimmedDiscordUsersButtonText = discordUsersButtonText.trim();
+
     expect(trimmedDiscordUsersButtonText).toBe(
-      'Discord Users\nManage Discord user roles and activities.',
+      'Discord Users\n\nManage Discord user roles and activities.',
     );
   });
 
@@ -531,8 +532,9 @@ describe('Home Page', () => {
       applicationButton,
     );
     const trimmedApplicationButtonText = applicationButtonText.trim();
+
     expect(trimmedApplicationButtonText).toBe(
-      'Applications\nManage and review submitted applications.',
+      'Applications\n\nManage and review submitted applications.',
     );
   });
 
diff --git a/index.html b/index.html
index 55c5c8b1..2e665c7e 100644
--- a/index.html
+++ b/index.html
@@ -78,36 +78,30 @@
     </section>
 
     <section class="buttonSection">
-      <a
-        class="action-button element-display-remove"
-        href="/goal/index.html"
-        id="create-goal"
-      >
-        Create Goals
-        <div class="description">
+      <a class="card" href="/goal/index.html" id="create-goal">
+        <h5 class="card__title">Create Goals</h5>
+        <p class="card__description">
           Set and track goals to align efforts and measure progress.
-        </div>
+        </p>
       </a>
 
-      <a class="action-button" href="/task/index.html">
-        Create Tasks
-        <div class="description">
+      <a class="card" href="/task/index.html">
+        <h5 class="card__title">Create Tasks</h5>
+        <p class="card__description">
           Define the tasks, create new tasks and track the progress.
-        </div>
+        </p>
       </a>
-      <a class="action-button" href="/profile/index.html">
-        Profile
-        <div class="description">
+      <a class="card" href="/profile/index.html">
+        <h5 class="card__title">Profile</h5>
+        <p class="card__description">
           View and edit your personal profile information.
-        </div>
+        </p>
       </a>
-      <a
-        id="discord-user-link"
-        class="action-button"
-        href="/users/discord/index.html"
-      >
-        Discord Users
-        <div class="description">Manage Discord user roles and activities.</div>
+      <a id="discord-user-link" class="card" href="/users/discord/index.html">
+        <h5 class="card__title">Discord Users</h5>
+        <p class="card__description">
+          Manage Discord user roles and activities.
+        </p>
       </a>
       <a
         id="user-management-link"
@@ -118,12 +112,12 @@
       </a>
       <a
         id="requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/requests/index.html"
-        >Requests
-        <div class="description">
+        ><h5 class="card__title">Requests</h5>
+        <p class="card__description">
           Manage requests for various resources and services.
-        </div>
+        </p>
       </a>
       <a
         id="extension-requests-link"
@@ -139,43 +133,49 @@
       >
         Task Requests
       </a>
-      <a href="/online-members/online-members.html" class="action-button">
-        Online Members
-        <div class="description">
+      <a href="/online-members/online-members.html" class="card">
+        <h5 class="card__title">Online Members</h5>
+        <p class="card__description">
           View the list of currently online members.
-        </div>
+        </p>
       </a>
-      <a class="action-button" href="/groups/index.html">
-        Discord Groups
-        <div class="description">Manage Discord group memberships.</div>
+      <a class="card" href="/groups/index.html">
+        <h5 class="card__title">Discord Groups</h5>
+        <p class="card__description">Manage Discord group memberships.</p>
       </a>
-      <a class="action-button" href="/standup/index.html">
-        Standup Updates
-        <div class="description">Post and view daily standup updates.</div>
+      <a class="card" href="/standup/index.html">
+        <h5 class="card__title">Standup Updates</h5>
+
+        <p class="card__description">Post and view daily standup updates.</p>
       </a>
-      <a class="action-button" href="/identity-service-logs/index.html"
-        >Identity Service Logs
-        <div class="description">Review logs related to identity services.</div>
+      <a class="card" href="/identity-service-logs/index.html"
+        ><h5 class="card__title">Identity Service Logs</h5>
+
+        <p class="card__description">
+          Review logs related to identity services.
+        </p>
       </a>
       <a
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="/feed/index.html"
         id="create-activity-feed"
       >
-        Activity Feed
-        <div class="description">
+        <h5 class="card__title">Activity Feed</h5>
+        <p class="card__description">
           View updates on activities and project progress.
-        </div></a
+        </p></a
       >
-      <a id="application-button" href="/applications" class="action-button">
-        Applications
-        <div class="description">Manage and review submitted applications.</div>
+      <a id="application-button" href="/applications" class="card">
+        <h5 class="card__title">Applications</h5>
+        <p class="card__description">
+          Manage and review submitted applications.
+        </p>
       </a>
       <div class="button-container element-display-remove" id="sync-repo-div">
-        <button id="repo-sync-button" class="action-button">
+        <button id="repo-sync-button" class="card">
           <span class="spinner"></span>
-          Sync Repo
-          <div class="description">Sync repository to update the changes</div>
+          <h5 class="card__title">Sync Repo</h5>
+          <p class="card__description">Sync repository to update the changes</p>
         </button>
         <div class="status" id="sync-repo-status-update"></div>
         <div id="toast" class="hidden">
diff --git a/style.css b/style.css
index 4f5246b9..00eec7ff 100644
--- a/style.css
+++ b/style.css
@@ -114,6 +114,36 @@ footer {
   text-decoration: none;
 }
 
+.card {
+  background-color: white;
+  text-decoration: none;
+  padding: 20px;
+  width: 280px;
+  border-radius: 15px;
+  border: 1px solid hsla(0, 0%, 92%, 1);
+  box-shadow: 1px 2px 4px 0px hsla(0, 0%, 0%, 0.1);
+}
+
+.card:hover {
+  background-color: rgb(215, 230, 241);
+  transition: 0.5s ease;
+}
+
+.card__title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: hsla(0, 0%, 21%, 1);
+}
+
+.card__description {
+  margin-top: 0.6rem;
+  color: hsla(0, 0%, 21%, 0.75);
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 18px;
+}
+
 .action-button:hover,
 .action-button:focus {
   color: var(--white-color);
@@ -245,7 +275,7 @@ footer {
   display: none !important;
 }
 
-@media only screen and (max-width: 1105px) {
+@media only screen and (max-width: 1200px) {
   .buttonSection {
     flex-direction: column;
     height: auto;

From 2244976f5b0bfa318adfc45ae56f417834dfbd87 Mon Sep 17 00:00:00 2001
From: Nikhil-Kumar1 <knikhil408@gmail.com>
Date: Mon, 23 Sep 2024 01:48:46 +0530
Subject: [PATCH 9/9] fixed the responsiveness of the super User buttons

---
 __tests__/home/home.test.js |  4 +++-
 index.html                  | 25 ++++++++++++++++---------
 style.css                   |  9 ++++-----
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/__tests__/home/home.test.js b/__tests__/home/home.test.js
index e8896f7b..49ab5c10 100644
--- a/__tests__/home/home.test.js
+++ b/__tests__/home/home.test.js
@@ -367,7 +367,9 @@ describe('Home Page', () => {
       userManagementButton,
     );
     const trimmedUserManagementButtonText = userManagementButtonText.trim();
-    expect(trimmedUserManagementButtonText).toBe('User Management');
+    expect(trimmedUserManagementButtonText).toBe(
+      'User Management\n\nManage requests for various resources and services.',
+    );
   });
 
   it('should display the Sync Repo button', async () => {
diff --git a/index.html b/index.html
index 2e665c7e..7401045f 100644
--- a/index.html
+++ b/index.html
@@ -105,33 +105,40 @@ <h5 class="card__title">Discord Users</h5>
       </a>
       <a
         id="user-management-link"
-        class="element-display-remove action-button"
+        class="element-display-remove card"
         href="/users/index.html"
       >
-        User Management
+        <h5 class="card__title">User Management</h5>
+        <p class="card__description">
+          Manage requests for various resources and services.
+        </p>
       </a>
       <a
         id="requests-link"
         class="card element-display-remove"
         href="/requests/index.html"
         ><h5 class="card__title">Requests</h5>
-        <p class="card__description">
-          Manage requests for various resources and services.
-        </p>
+        <p class="card__description">Monitor and manage user activity</p>
       </a>
       <a
         id="extension-requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="extension-requests"
       >
-        Extension Requests
+        <h5 class="card__title">Extension Requests</h5>
+        <p class="card__description">
+          Submit requests for deadline extensions on tasks.
+        </p>
       </a>
       <a
         id="task-requests-link"
-        class="action-button element-display-remove"
+        class="card element-display-remove"
         href="task-requests"
       >
-        Task Requests
+        <h5 class="card__title">Task Requests</h5>
+        <p class="card__description">
+          Request new tasks and provide task details,
+        </p>
       </a>
       <a href="/online-members/online-members.html" class="card">
         <h5 class="card__title">Online Members</h5>
diff --git a/style.css b/style.css
index 00eec7ff..a3cc8848 100644
--- a/style.css
+++ b/style.css
@@ -31,7 +31,6 @@ body {
 
 .buttonSection {
   margin-top: 10px;
-  height: 80vh;
   display: flex;
   justify-content: center;
   align-content: center;
@@ -63,7 +62,6 @@ button {
   border-color: transparent;
 }
 
-/* profile section */
 .profileSection {
   height: 80vh;
   display: flex;
@@ -100,7 +98,7 @@ footer {
 }
 
 .action-button {
-  width: 350px;
+  width: 100%;
   color: var(--black-color);
   font-weight: 600;
   font-size: 1.1rem;
@@ -169,12 +167,13 @@ footer {
   gap: 1.25rem;
   margin-top: 3.12rem;
   margin-bottom: 1.25rem;
-  padding: 0 6.25rem;
+  padding: 0 1.25rem;
   flex-wrap: wrap;
 }
 
 #sync-buttons .button-container {
-  flex: 1 1 100%;
+  flex: 1 1 auto;
+
   max-width: 250px;
   display: flex;
   flex-direction: column;