From b616a26df1fe27d0d3741b582aa8651c03452b40 Mon Sep 17 00:00:00 2001
From: Vito Sansevero <vito.sansevero@gmail.com>
Date: Sun, 8 Feb 2026 06:39:00 -0800
Subject: [PATCH] style: Phase 3 typography and spacing pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce heading sizes: text-xl/2xl/3xl → text-sm font-semibold
- Tighten modal padding: p-6 → p-4, px-6 py-4 → px-4 py-2
- Compact empty states: py-12 → py-6, py-8 → py-4
- Reduce space-y-6 → space-y-3 in metadata panels
- Shrink stat card numbers: text-xl → text-lg
- Shrink decorative emojis: text-2xl/3xl → text-lg
- Keep lightbox nav buttons at text-xl for usability
---
 web/admin.html      |  8 ++++----
 web/js/admin.js     | 34 +++++++++++++++++-----------------
 web/js/gallery.js   | 32 ++++++++++++++++----------------
 web/js/tags-page.js | 10 +++++-----
 web/metadata.html   |  6 +++---
 5 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/web/admin.html b/web/admin.html
index 84d5106..6f2a61a 100644
--- a/web/admin.html
+++ b/web/admin.html
@@ -40,7 +40,7 @@
                         <div class="flex items-center justify-between">
                             <div>
                                 <p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Total Prompts</p>
-                                <p class="text-xl font-bold text-pm-accent" id="totalPrompts">-</p>
+                                <p class="text-lg font-bold text-pm-accent" id="totalPrompts">-</p>
                             </div>
                         </div>
                     </div>
@@ -48,7 +48,7 @@
                         <div class="flex items-center justify-between">
                             <div>
                                 <p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Categories</p>
-                                <p class="text-xl font-bold text-pm" id="totalCategories">-</p>
+                                <p class="text-lg font-bold text-pm" id="totalCategories">-</p>
                             </div>
                         </div>
                     </div>
@@ -57,7 +57,7 @@
                         <div class="flex items-center justify-between">
                             <div>
                                 <p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Unique Tags</p>
-                                <p class="text-xl font-bold text-pm-success" id="totalTags">-</p>
+                                <p class="text-lg font-bold text-pm-success" id="totalTags">-</p>
                             </div>
                         </div>
                     </div>
@@ -65,7 +65,7 @@
                         <div class="flex items-center justify-between">
                             <div>
                                 <p class="text-pm-secondary text-xs font-medium uppercase tracking-wide">Avg Rating</p>
-                                <p class="text-xl font-bold text-pm-warning" id="avgRating">-</p>
+                                <p class="text-lg font-bold text-pm-warning" id="avgRating">-</p>
                             </div>
                         </div>
                     </div>
diff --git a/web/js/admin.js b/web/js/admin.js
index b34d0b6..820dc9f 100644
--- a/web/js/admin.js
+++ b/web/js/admin.js
@@ -420,11 +420,11 @@
 
                 if (this.prompts.length === 0) {
                     container.innerHTML = `
-                        <div class="text-center py-12">
+                        <div class="text-center py-6">
                             <div class="w-16 h-16 bg-pm-surface rounded-full flex items-center justify-center mx-auto mb-4">
-                                <span class="text-2xl">📭</span>
+                                <span class="text-lg">📭</span>
                             </div>
-                            <h3 class="text-lg font-medium text-pm-secondary mb-2">No prompts found</h3>
+                            <h3 class="text-sm font-semibold text-pm-secondary mb-2">No prompts found</h3>
                             <p class="text-pm-muted">Try adjusting your search criteria or create some prompts in ComfyUI</p>
                         </div>
                     `;
@@ -491,7 +491,7 @@
 
                 return `
                     <div class="bg-pm-surface rounded-pm-md border border-pm hover:border-pm transition-all duration-200" data-id="${prompt.id}">
-                        <div class="p-6">
+                        <div class="p-4">
                             <div class="flex items-start space-x-4">
                                 <input type="checkbox" class="prompt-checkbox w-5 h-5 text-pm-accent bg-pm-input border-pm rounded focus:ring-pm-accent mt-1" data-id="${prompt.id}">
 
@@ -633,7 +633,7 @@
                 const isViewerOpen = viewerContainer && viewerContainer.style.display !== 'none';
                 const zIndex = isViewerOpen ? 'z-[50000]' : 'z-50';
                 
-                notification.className = `fixed top-4 right-4 px-6 py-4 rounded-pm-sm shadow-pm ${zIndex} transition-all duration-300 transform translate-x-full`;
+                notification.className = `fixed top-4 right-4 px-4 py-2 rounded-pm-sm shadow-pm text-sm ${zIndex} transition-all duration-300 transform translate-x-full`;
 
                 const colors = {
                     success: "bg-pm-success text-pm",
@@ -1245,7 +1245,7 @@
                 runButton.disabled = true;
                 runButton.innerHTML = '🔄 Running...';
                 resultsContainer.innerHTML = `
-                    <div class="text-center py-8">
+                    <div class="text-center py-4">
                         <div class="w-12 h-12 border-4 border-teal-500/30 border-t-teal-500 rounded-full animate-spin mx-auto mb-4"></div>
                         <p class="text-pm-secondary">Running maintenance operations...</p>
                         <p class="text-sm text-pm-muted mt-2">Operations: ${selectedOps.map(op => op.replace(/_/g, ' ')).join(', ')}</p>
@@ -1379,7 +1379,7 @@
             async runDiagnostics() {
                 const content = document.getElementById("diagnosticsContent");
                 content.innerHTML = `
-                    <div class="text-center py-8">
+                    <div class="text-center py-4">
                         <div class="w-12 h-12 border-4 border-orange-500/30 border-t-orange-500 rounded-full animate-spin mx-auto mb-4"></div>
                         <p class="text-pm-secondary">Running diagnostics...</p>
                     </div>
@@ -1691,12 +1691,12 @@
                 const modal = document.createElement('div');
                 modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                 modal.innerHTML = `
-                    <div class="bg-pm-surface rounded-pm-md p-6 max-w-2xl w-full mx-4 border border-pm">
-                        <h3 class="text-xl font-semibold text-pm mb-4">📋 Copy Prompt Text</h3>
+                    <div class="bg-pm-surface rounded-pm-md p-4 max-w-2xl w-full mx-4 border border-pm">
+                        <h3 class="text-sm font-semibold text-pm mb-3">Copy Prompt Text</h3>
                         <p class="text-pm-secondary mb-4">Please manually copy the text below:</p>
                         <textarea readonly class="w-full h-32 px-4 py-3 bg-pm-surface border border-pm rounded-pm-sm text-pm resize-none" style="font-family: monospace;">${text}</textarea>
                         <div class="flex justify-end mt-4">
-                            <button class="px-6 py-2 bg-pm-accent hover:bg-pm-accent-hover text-pm font-medium rounded-pm-sm transition-colors" onclick="this.closest('[class*=fixed]').remove()">
+                            <button class="px-4 py-1.5 bg-pm-accent hover:bg-pm-accent-hover text-pm font-medium rounded-pm-sm transition-colors" onclick="this.closest('[class*=fixed]').remove()">
                                 Close
                             </button>
                         </div>
@@ -1956,7 +1956,7 @@
                 const container = document.getElementById("logsContainer");
                 
                 if (logs.length === 0) {
-                    container.innerHTML = '<div class="text-center py-8 text-pm-muted">No logs found</div>';
+                    container.innerHTML = '<div class="text-center py-4 text-pm-muted">No logs found</div>';
                     return;
                 }
 
@@ -2445,7 +2445,7 @@
                         <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                         </svg>
-                        <p class="text-lg mb-2">Error Loading Metadata</p>
+                        <p class="text-sm mb-2">Error Loading Metadata</p>
                         <p class="text-sm">Could not extract ComfyUI metadata from this image</p>
                     </div>
                 `;
@@ -2982,7 +2982,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                             <svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                             </svg>
-                            <h1 class="text-lg font-medium text-pm">Generation data</h1>
+                            <h1 class="text-sm font-semibold text-pm">Generation data</h1>
                         </div>
                         <button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
                             📋 COPY ALL
@@ -2990,13 +2990,13 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                     </div>
 
                     <!-- Scrollable Content -->
-                    <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
+                    <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
                         <!-- Initial placeholder content -->
                         <div class="text-center text-pm-muted py-8">
                             <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                             </svg>
-                            <p class="text-lg mb-2">Loading Metadata...</p>
+                            <p class="text-sm mb-2">Loading Metadata...</p>
                             <p class="text-sm">Extracting ComfyUI workflow data</p>
                         </div>
                     </div>
@@ -3020,7 +3020,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                             <svg class="w-16 h-16 mx-auto mb-4 opacity-30 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                             </svg>
-                            <p class="text-lg mb-2">Loading Metadata...</p>
+                            <p class="text-sm mb-2">Loading Metadata...</p>
                             <p class="text-sm">Extracting ComfyUI workflow data</p>
                         </div>
                     </div>
@@ -3034,7 +3034,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                     console.error('Failed to load metadata:', error);
                     metadataContent.innerHTML = `
                         <div class="text-center text-pm-error py-8">
-                            <p class="text-lg mb-2">Failed to Load Metadata</p>
+                            <p class="text-sm mb-2">Failed to Load Metadata</p>
                             <p class="text-sm">Could not extract ComfyUI workflow data</p>
                         </div>
                     `;
diff --git a/web/js/gallery.js b/web/js/gallery.js
index 106e3b8..04f599a 100644
--- a/web/js/gallery.js
+++ b/web/js/gallery.js
@@ -221,7 +221,7 @@
                             <!-- Fallback for failed thumbnails -->
                             <div class="hidden absolute inset-0 bg-pm-surface text-pm-secondary flex items-center justify-center">
                                 <div class="text-center">
-                                    <div class="text-2xl mb-1">${isVideo ? '🎬' : '🖼️'}</div>
+                                    <div class="text-lg mb-1">${isVideo ? '🎬' : '🖼️'}</div>
                                     <div class="text-xs">Failed to load</div>
                                 </div>
                             </div>
@@ -388,7 +388,7 @@
                             <svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                             </svg>
-                            <h1 class="text-lg font-medium text-pm">Generation data</h1>
+                            <h1 class="text-sm font-semibold text-pm">Generation data</h1>
                         </div>
                         <button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
                             📋 COPY ALL
@@ -396,7 +396,7 @@
                     </div>
 
                     <!-- Scrollable Content -->
-                    <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
+                    <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
                         <!-- Loading state -->
                         <div class="text-center text-pm-muted py-8">
                             <div class="w-8 h-8 border-2 border-pm-accent/30 border-t-pm-accent rounded-full animate-spin mx-auto mb-2"></div>
@@ -526,7 +526,7 @@
                                 <svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                 </svg>
-                                <h1 class="text-lg font-medium text-pm">Generation data</h1>
+                                <h1 class="text-sm font-semibold text-pm">Generation data</h1>
                             </div>
                             <button class="text-xs text-pm-accent hover:text-pm-accent transition-colors metadata-copy-all">
                                 📋 COPY ALL
@@ -534,7 +534,7 @@
                         </div>
 
                         <!-- Scrollable Content -->
-                        <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-6">
+                        <div id="metadata-content" class="flex-1 overflow-y-auto p-4 space-y-3">
                             <!-- Loading state -->
                             <div class="text-center text-pm-muted py-8">
                                 <div class="w-8 h-8 border-2 border-pm-accent/30 border-t-pm-accent rounded-full animate-spin mx-auto mb-2"></div>
@@ -628,7 +628,7 @@
                                 <svg class="w-5 h-5 text-pm-error" fill="currentColor" viewBox="0 0 24 24">
                                     <path d="M8 5v14l11-7z"/>
                                 </svg>
-                                <h1 class="text-lg font-medium text-pm">Video Info</h1>
+                                <h1 class="text-sm font-semibold text-pm">Video Info</h1>
                             </div>
                             <button class="text-xs text-pm-accent hover:text-pm-accent transition-colors" onclick="navigator.clipboard.writeText('${videoUrl}').then(() => this.textContent = '✓ Copied!'); setTimeout(() => this.textContent = '📋 COPY URL', 1000)">
                                 📋 COPY URL
@@ -636,7 +636,7 @@
                         </div>
                         
                         <!-- Video info content -->
-                        <div id="video-info-content" class="flex-1 overflow-y-auto p-4 space-y-6">
+                        <div id="video-info-content" class="flex-1 overflow-y-auto p-4 space-y-3">
                             <!-- Video details will be loaded here -->
                         </div>
                     </div>
@@ -1295,7 +1295,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
 
             showNotification(message, type = 'info') {
                 const notification = document.createElement('div');
-                notification.className = `fixed top-4 right-4 px-6 py-4 rounded-pm-md shadow-pm z-[20000] transition-all duration-300 transform translate-x-full`;
+                notification.className = `fixed top-4 right-4 px-4 py-2 rounded-pm-md shadow-pm text-sm z-[20000] transition-all duration-300 transform translate-x-full`;
 
                 const colors = {
                     success: "bg-pm-success text-pm",
@@ -2138,7 +2138,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                 scanStatus.classList.add('hidden');
                 
                 if (duplicates.length === 0) {
-                    list.innerHTML = '<div class="text-center py-8 text-pm-secondary">No duplicate images found! 🎉</div>';
+                    list.innerHTML = '<div class="text-center py-4 text-pm-secondary">No duplicate images found! 🎉</div>';
                     content.classList.remove('hidden');
                     return;
                 }
@@ -2396,15 +2396,15 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                 modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
                 modal.innerHTML = `
                     <div class="bg-pm-surface rounded-pm-md max-w-2xl w-full mx-4 border border-pm">
-                        <div class="p-6">
-                            <h3 class="text-xl font-semibold text-pm mb-4 flex items-center">
+                        <div class="p-4">
+                            <h3 class="text-sm font-semibold text-pm mb-3 flex items-center">
                                 <span class="mr-2">🚀</span>
                                 Generate Thumbnails?
                             </h3>
                             <p class="text-pm-secondary mb-4">
                                 Found ${missingCount} images without thumbnails (${imageCount} total images). Would you like to generate thumbnails for faster loading?
                             </p>
-                            <p class="text-sm text-pm-muted mb-6">
+                            <p class="text-sm text-pm-muted mb-3">
                                 💡 Thumbnails speed up gallery loading significantly. You can change this setting in Gallery Settings.
                             </p>
                             <div class="flex space-x-3">
@@ -2443,8 +2443,8 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                 // Transform the modal to show progress
                 const modalContent = modal.querySelector('.bg-pm-surface');
                 modalContent.innerHTML = `
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold text-pm mb-4 flex items-center">
+                    <div class="p-4">
+                        <h3 class="text-sm font-semibold text-pm mb-3 flex items-center">
                             <span class="mr-2">🚀</span>
                             Generating Thumbnails
                         </h3>
@@ -2453,7 +2453,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                         </p>
 
                         <!-- Progress Section -->
-                        <div class="mb-6">
+                        <div class="mb-3">
                             <div class="flex items-center justify-between text-sm text-pm-secondary mb-2">
                                 <span id="modalProgressText">Initializing...</span>
                                 <span id="modalProgressPercent">0%</span>
@@ -3451,7 +3451,7 @@ Seed: ${this.currentMetadata.seed || 'Unknown'}`;
                 };
 
                 const notification = document.createElement('div');
-                notification.className = `fixed bottom-4 right-4 ${colors[type]} text-pm px-6 py-3 rounded-pm-md shadow-pm z-50 animate-fade-in`;
+                notification.className = `fixed bottom-4 right-4 ${colors[type]} text-pm px-4 py-2 rounded-pm-md shadow-pm text-sm z-50 animate-fade-in`;
                 notification.textContent = message;
                 document.body.appendChild(notification);
 
diff --git a/web/js/tags-page.js b/web/js/tags-page.js
index 2d0a0d5..fe91327 100644
--- a/web/js/tags-page.js
+++ b/web/js/tags-page.js
@@ -134,7 +134,7 @@ class TagsPageManager {
             if (container) {
                 container.replaceChildren();
                 const errDiv = document.createElement('div');
-                errDiv.className = 'text-center py-8 text-pm-error text-sm';
+                errDiv.className = 'text-center py-4 text-pm-error text-sm';
                 errDiv.textContent = 'Failed to load tags. Try refreshing.';
                 container.appendChild(errDiv);
             }
@@ -594,7 +594,7 @@ class TagsPageManager {
         if (grid) {
             grid.replaceChildren();
             const spinner = document.createElement('div');
-            spinner.className = 'col-span-full text-center py-8';
+            spinner.className = 'col-span-full text-center py-4';
             const spinEl = document.createElement('div');
             spinEl.className = 'w-8 h-8 border-2 border-pm-success/30 border-t-pm-success rounded-full animate-spin mx-auto';
             spinner.appendChild(spinEl);
@@ -638,7 +638,7 @@ class TagsPageManager {
             if (grid) {
                 grid.replaceChildren();
                 const errDiv = document.createElement('div');
-                errDiv.className = 'col-span-full text-center py-8 text-pm-error';
+                errDiv.className = 'col-span-full text-center py-4 text-pm-error';
                 errDiv.textContent = 'Failed to load prompts';
                 grid.appendChild(errDiv);
             }
@@ -752,9 +752,9 @@ class TagsPageManager {
         if (this.prompts.length === 0) {
             grid.replaceChildren();
             const emptyDiv = document.createElement('div');
-            emptyDiv.className = 'col-span-full text-center py-12 text-pm-muted';
+            emptyDiv.className = 'col-span-full text-center py-6 text-pm-muted';
             const icon = document.createElement('span');
-            icon.className = 'text-3xl block mb-2';
+            icon.className = 'text-lg block mb-2';
             icon.textContent = '\uD83D\uDCED';
             emptyDiv.appendChild(icon);
             const msg = document.createElement('span');
diff --git a/web/metadata.html b/web/metadata.html
index 7ec9087..6f2aa34 100644
--- a/web/metadata.html
+++ b/web/metadata.html
@@ -601,7 +601,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
                 <svg class="w-16 h-16 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                 </svg>
-                <p class="text-lg mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
+                <p class="text-sm mb-2">Drag & Drop PNG with ComfyUI Workflow</p>
                 <p class="text-sm">Or click to browse files</p>
             </div>
             
@@ -638,7 +638,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
                     <svg class="w-5 h-5 text-pm-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                     </svg>
-                    <h1 class="text-lg font-medium text-pm">Generation data</h1>
+                    <h1 class="text-sm font-semibold text-pm">Generation data</h1>
                 </div>
                 <button class="text-xs text-pm-accent hover:bg-pm-hover transition-colors" onclick="copyAllData()">
                     📋 COPY ALL
@@ -652,7 +652,7 @@ Seed: ${currentWorkflowData.seed || 'Unknown'}`;
                     <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                     </svg>
-                    <p class="text-lg mb-2">No Image Loaded</p>
+                    <p class="text-sm mb-2">No Image Loaded</p>
                     <p class="text-sm">Upload a PNG with embedded ComfyUI workflow to view generation data</p>
                 </div>
             </div>