refactor: Optimize PDF modal for mobile screens

- 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).
This commit is contained in:
juanatsap
2025-11-20 15:09:54 +00:00
parent ae08ebde05
commit 7ad157a242
+37 -10
View File
@@ -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;
}
}
/* =============================================================================