From 6f781af38136c3be8963443c3352bc1f89b60186 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 25 Feb 2026 20:15:29 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8F=20Alignment=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Dashboard/Dashboard.tsx | 23 +++--
 src/client/components/Dashboard/PullList.tsx  |  2 +-
 src/client/components/shared/Navbar2.tsx      | 96 ++++++++++---------
 3 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index ac4c2d9..c9ef126 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -67,16 +67,19 @@ export const Dashboard = (): ReactElement => {
   });
 
   return (
-    <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-      <PullList />
-      {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
-      {/* Wanted comics */}
-      <WantedComicsList comics={wantedComics?.data?.docs} />
-      {/* Library Statistics */}
-      {statistics && <LibraryStatistics stats={statistics?.data} />}
-      {/* Volume groups */}
-      <VolumeGroups volumeGroups={volumeGroups?.data} />
-    </div>
+    <>
+      
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <PullList />
+        {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
+        {/* Wanted comics */}
+        <WantedComicsList comics={wantedComics?.data?.docs} />
+        {/* Library Statistics */}
+        {statistics && <LibraryStatistics stats={statistics?.data} />}
+        {/* Volume groups */}
+        <VolumeGroups volumeGroups={volumeGroups?.data} />
+      </div>
+    </>
   );
 };
 
diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx
index 0e1d545..d571df4 100644
--- a/src/client/components/Dashboard/PullList.tsx
+++ b/src/client/components/Dashboard/PullList.tsx
@@ -142,7 +142,7 @@ export const PullList = (): ReactElement => {
             />
           </div>
         </div>
-      <div className="overflow-hidden mt-3 -mx-4 sm:-mx-8 lg:-mx-16 xl:-mx-20 2xl:-mx-24 pl-4 sm:pl-8 lg:pl-16 xl:pl-20 2xl:pl-24">
+      <div className="w-lvw -mr-4 sm:-mr-6 lg:-mr-8 mt-3">
         {isSuccess && !isLoading && (
           <div className="overflow-hidden" ref={emblaRef}>
             <div className="flex">
diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx
index 43eadf0..12862c3 100644
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -11,13 +11,14 @@ export const Navbar2 = (): ReactElement => {
   };
 
   return (
-    <header className="bg-white dark:bg-gray-900 gap-8 px-5 py-5 h-18 border-b-2 border-gray-300 dark:border-slate-200">
-      {/* Logo */}
-      <div className="mx-auto flex">
-        <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
+    <header className="bg-white dark:bg-gray-900 border-b-2 border-gray-300 dark:border-slate-200">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-5">
+        <div className="flex items-center gap-8">
+          {/* Logo */}
+          <img src="/src/client/assets/img/threetwo.png" alt="ThreeTwo!" />
 
-        {/* Main Navigation */}
-        <div className="flex flex-1 items-center justify-end md:justify-between">
+          {/* Main Navigation */}
+          <div className="flex flex-1 items-center justify-end md:justify-between">
           <nav
             aria-label="ThreeTwo Main Navigation"
             className="hidden md:block"
@@ -78,48 +79,49 @@ export const Navbar2 = (): ReactElement => {
             </ul>
           </nav>
 
-          {/* Right-most Nav */}
-          <div className="flex items-center gap-4">
-            <ul className="flex items-center gap-6 text-md">
-              {/* Settings Icon and text */}
-              <li>
-                <Link
-                  to="/settings"
-                  className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
-                >
-                  <span className="w-5 h-5">
-                    <i className="icon-[solar--settings-outline] h-5 w-5"></i>
-                  </span>
-                  <span>Settings</span>
-                </Link>
-              </li>
-
-              <li>
-                {/* Light/Dark Mode toggle */}
-                <div className="flex items-center space-x-2">
-                  <span className="text-gray-600 dark:text-white">Light</span>
-                  <label
-                    htmlFor="toggle"
-                    className="relative inline-flex items-center"
+            {/* Right-most Nav */}
+            <div className="flex items-center gap-4">
+              <ul className="flex items-center gap-6 text-md">
+                {/* Settings Icon and text */}
+                <li>
+                  <Link
+                    to="/settings"
+                    className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                   >
-                    <input
-                      type="checkbox"
-                      id="toggle"
-                      className="sr-only"
-                      checked={darkMode}
-                      onChange={toggleDarkMode}
-                    />
-                    <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
-                    <span
-                      className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
-                        darkMode ? "translate-x-4" : ""
-                      }`}
-                    ></span>
-                  </label>
-                  <span className="text-gray-600 dark:text-white">Dark</span>
-                </div>
-              </li>
-            </ul>
+                    <span className="w-5 h-5">
+                      <i className="icon-[solar--settings-outline] h-5 w-5"></i>
+                    </span>
+                    <span>Settings</span>
+                  </Link>
+                </li>
+
+                <li>
+                  {/* Light/Dark Mode toggle */}
+                  <div className="flex items-center space-x-2">
+                    <span className="text-gray-600 dark:text-white">Light</span>
+                    <label
+                      htmlFor="toggle"
+                      className="relative inline-flex items-center"
+                    >
+                      <input
+                        type="checkbox"
+                        id="toggle"
+                        className="sr-only"
+                        checked={darkMode}
+                        onChange={toggleDarkMode}
+                      />
+                      <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
+                      <span
+                        className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
+                          darkMode ? "translate-x-4" : ""
+                        }`}
+                      ></span>
+                    </label>
+                    <span className="text-gray-600 dark:text-white">Dark</span>
+                  </div>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>