Style watch history grids like video feed

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>

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

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>