From 70917449d99ea25b2d5504ff456c386137b3a3ce Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Tue, 30 Sep 2025 13:17:33 -0400
Subject: [PATCH] Style watch history grids like video feed

---
 components/profile-modal.html |  3 +--
 css/style.css                 | 28 ++++++++++++++++++++++++++++
 views/history.html            |  6 +-----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index 3c3728e0..efe700ce 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -303,9 +303,8 @@
                 <div id="profileHistoryScroll" class="relative max-h-[420px] overflow-y-auto pr-1">
                   <div
                     id="profileHistoryGrid"
-                    class="hidden"
+                    class="watch-history-grid watch-history-grid--modal hidden"
                     role="list"
-                    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;"
                   ></div>
                   <div id="profileHistorySentinel" class="h-1 w-full"></div>
                 </div>
diff --git a/css/style.css b/css/style.css
index de146c6e..3d23f26b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -104,6 +104,34 @@ header img {
   padding: 1.5rem 0;
 }
 
+/* Dedicated watch-history grids mirror the home feed layout */
+.watch-history-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  gap: 2rem;
+  width: 100%;
+  padding: 1.5rem 0;
+}
+
+/* Profile modal gets a tighter column and removes outer padding */
+.watch-history-grid.watch-history-grid--modal {
+  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
+  gap: 1.5rem;
+  padding: 0;
+}
+
+@media (max-width: 640px) {
+  .watch-history-grid {
+    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
+    gap: 1.5rem;
+  }
+
+  .watch-history-grid.watch-history-grid--modal {
+    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
+    gap: 1.25rem;
+  }
+}
+
 /* Video Cards */
 .video-card {
   background-color: var(--color-card);
diff --git a/views/history.html b/views/history.html
index fa69bf07..795e5ae5 100644
--- a/views/history.html
+++ b/views/history.html
@@ -6,11 +6,7 @@
   <div id="watchHistoryLoading" class="flex justify-center py-12">
     <div class="h-10 w-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
   </div>
-  <div
-    id="watchHistoryGrid"
-    class="hidden"
-    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem;"
-  ></div>
+  <div id="watchHistoryGrid" class="watch-history-grid hidden"></div>
   <p id="watchHistoryEmpty" class="hidden text-gray-400 text-center py-12">
     Your watch history is empty. Watch some videos to populate this list.
   </p>