From 7caaa425ed44001d097e5a2ed960539c833af674 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 2 Mar 2026 11:19:45 +0000
Subject: [PATCH] Refactor series item layout to use responsive grid for
 improved display and interaction

---
 atlas/templates/atlas/user_uploads.html | 38 +++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/atlas/templates/atlas/user_uploads.html b/atlas/templates/atlas/user_uploads.html
index d1fe13d5..4f842c7d 100644
--- a/atlas/templates/atlas/user_uploads.html
+++ b/atlas/templates/atlas/user_uploads.html
@@ -367,11 +367,39 @@
 
         .series-block-popup-link a { color: var(--muted); text-decoration: underline; }
 
-        .series-item { display: flex; gap: 12px; align-items: flex-start; }
-        .series-left { flex: 1; }
-        .series-right { margin-left: auto; text-align: right; }
-        .series-title { margin: 0 0 4px 0; font-size: 1rem; font-weight: 700; }
-        .series-meta div { line-height: 1.1; }
+        /* Grid layout for series items: responsive flex-wrap cards */
+        .study-series-list { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
+        .study-series-list ul { margin: 0; padding: 0; }
+        .study-series-list li { list-style: none; }
+
+        .series-item {
+            box-sizing: border-box;
+            width: calc(33.333% - 8px);
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 12px;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
+            transition: box-shadow 120ms ease, transform 120ms ease;
+        }
+
+        .series-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.4); transform: translateY(-2px); }
+
+        .series-left { display: block; }
+        .series-right { align-self: flex-end; text-align: right; }
+        .series-title { margin: 0 0 6px 0; font-size: 1rem; font-weight: 700; }
+        .series-meta div { line-height: 1.2; color: var(--muted); }
+
+        /* Responsive breakpoints */
+        @media (max-width: 991px) {
+            .series-item { width: calc(50% - 8px); }
+        }
+        @media (max-width: 575px) {
+            .series-item { width: 100%; }
+            .series-right { text-align: left; }
+        }
 
         /* Selected state */
         #series-list .selected {