From 4416502e149bf0cf2d2d70540296aa92fa33923a Mon Sep 17 00:00:00 2001
From: ralksta <ralksta@users.noreply.github.com>
Date: Fri, 29 May 2026 17:37:34 +0200
Subject: [PATCH] feat: enlarge admin thumbnails for hero, album, and subpage
 grids
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero grid: 140px → 220px min tile width
- Album grid: 160px → 240px min tile width
- Subpage grid: 140px → 200px min tile width
- Picker thumbnails: 40px → 52px
- Admin main max-width: 960px → 1120px for more space
- Slightly larger overlay buttons and index badges
---
 app/admin/admin.css | 66 ++++++++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/app/admin/admin.css b/app/admin/admin.css
index 2f651f9..0e93fbe 100644
--- a/app/admin/admin.css
+++ b/app/admin/admin.css
@@ -380,7 +380,7 @@
 .admin-main {
   flex: 1;
   padding: 1.5rem;
-  max-width: 960px;
+  max-width: 1120px;
   margin: 0 auto;
   width: 100%;
 }
@@ -459,14 +459,14 @@
 /* Hero Grid */
 .hero-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 0.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.75rem;
 }
 
 .hero-tile {
   position: relative;
   aspect-ratio: 16 / 10;
-  border-radius: 8px;
+  border-radius: 10px;
   overflow: hidden;
   background: var(--admin-bg-elevated);
   border: 1px solid var(--admin-border);
@@ -485,16 +485,16 @@
 
 .hero-tile-remove {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 22px;
-  height: 22px;
+  top: 6px;
+  right: 6px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   border: none;
   color: #fff;
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -513,14 +513,14 @@
 
 .hero-tile-index {
   position: absolute;
-  bottom: 4px;
-  left: 4px;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
+  bottom: 6px;
+  left: 6px;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
-  font-size: 0.65rem;
+  font-size: 0.7rem;
   font-weight: 600;
   display: flex;
   align-items: center;
@@ -530,8 +530,8 @@
 /* Album Grid */
 .album-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
 }
 
 .album-tile {
@@ -590,14 +590,14 @@
   backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.95rem;
   transition: background 0.1s;
 }
 
@@ -606,14 +606,14 @@
 }
 
 .album-tile-info {
-  padding: 0.5rem 0.6rem;
+  padding: 0.6rem 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 0.1rem;
+  gap: 0.15rem;
 }
 
 .album-tile-name {
-  font-size: 0.8rem;
+  font-size: 0.875rem;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
@@ -621,7 +621,7 @@
 }
 
 .album-tile-count {
-  font-size: 0.7rem;
+  font-size: 0.75rem;
   color: var(--admin-text-muted);
 }
 
@@ -644,8 +644,8 @@
 /* Subpage Overview Grid */
 .subpage-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  gap: 0.6rem;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 0.75rem;
   margin-bottom: 1rem;
 }
 
@@ -937,21 +937,21 @@
 }
 
 .picker-thumb-placeholder {
-  width: 40px;
-  height: 40px;
+  width: 52px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--admin-bg-elevated);
-  border-radius: 6px;
-  font-size: 1.1rem;
+  border-radius: 8px;
+  font-size: 1.2rem;
 }
 
 .picker-thumb-img {
-  width: 40px;
-  height: 40px;
+  width: 52px;
+  height: 52px;
   object-fit: cover;
-  border-radius: 6px;
+  border-radius: 8px;
   background: var(--admin-bg-elevated);
 }