From 7ad157a2423bbdc77b35a0eb63da78052035cd53 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 15:09:54 +0000
Subject: [PATCH] refactor: Optimize PDF modal for mobile screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide subtitle on mobile to save vertical space
- Reduce all font sizes (header: 1.25rem, titles: 0.9rem, text: 0.75rem)
- Decrease modal padding from 2.5rem to 1.5rem 1rem
- Shrink page badges from 60×60px to 50×50px
- Reduce card padding from 16px to 12px
- Decrease gaps from 12px to 10px throughout
- Compact footer and button spacing
- Make download button smaller with 0.9rem font

Significantly reduces modal height for better mobile UX on small screens (iPhone 13 Mini, Samsung S24).
---
 static/css/04-interactive/_modals.css | 47 +++++++++++++++++++++------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/static/css/04-interactive/_modals.css b/static/css/04-interactive/_modals.css
index c9dee0c..616d89a 100644
--- a/static/css/04-interactive/_modals.css
+++ b/static/css/04-interactive/_modals.css
@@ -745,10 +745,31 @@
         max-width: calc(100% - 1rem);
     }
 
+    /* Reduce modal padding on mobile */
+    .info-modal-content {
+        padding: 1.5rem 1rem;
+    }
+
+    /* Hide subtitle on mobile */
+    .pdf-modal-subtitle {
+        display: none;
+    }
+
+    /* Smaller header on mobile */
+    .info-modal-header {
+        margin-bottom: 1rem;
+    }
+
+    .info-modal-header h2 {
+        font-size: 1.25rem;
+        margin-bottom: 0;
+    }
+
     .pdf-options-grid {
         display: flex;
         flex-direction: column;
-        gap: 12px;
+        gap: 10px;
+        margin: 1rem 0;
     }
 
     /* Remove scale transform in mobile */
@@ -764,8 +785,8 @@
     .pdf-option-card {
         flex-direction: row;
         align-items: center;
-        padding: 16px;
-        gap: 16px;
+        padding: 12px;
+        gap: 12px;
     }
 
     /* Hide full thumbnail on mobile, show compact badge instead */
@@ -779,13 +800,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 60px;
-        height: 60px;
+        width: 50px;
+        height: 50px;
         flex-shrink: 0;
         background: #f5f5f5;
         border-radius: 8px;
         font-weight: 700;
-        font-size: 0.75rem;
+        font-size: 0.65rem;
         color: #666;
         text-transform: uppercase;
     }
@@ -818,12 +839,12 @@
     }
 
     .pdf-option-info h3 {
-        font-size: 1rem;
+        font-size: 0.9rem;
         margin-bottom: 2px;
     }
 
     .pdf-option-info p {
-        font-size: 0.8rem;
+        font-size: 0.75rem;
     }
 
     /* Move checkmark to right side */
@@ -833,10 +854,16 @@
     }
 
     .pdf-download-btn {
-        padding: 12px 24px;
-        font-size: 0.95rem;
+        padding: 10px 20px;
+        font-size: 0.9rem;
         width: 100%;
     }
+
+    /* Reduce footer padding */
+    .pdf-modal-footer {
+        padding-top: 0.75rem;
+        margin-top: 0.5rem;
+    }
 }
 
 /* =============================================================================