fix: media page mobile overflow on kindle select row

All 9 pages verified: zero horizontal overflow on 390px mobile viewport.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-03-30 21:28:53 -05:00
parent c7f8f4b709
commit 5803973a15

View File

@@ -415,9 +415,10 @@
.kindle-auto-row { .kindle-auto-row {
display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4);
padding: var(--sp-2) var(--sp-3); background: var(--surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); background: var(--surface-secondary); border-radius: var(--radius-md); border: 1px solid var(--border);
flex-wrap: wrap; max-width: 100%; overflow: hidden;
} }
.kindle-auto-row svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; } .kindle-auto-row svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.kindle-auto-label { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; } .kindle-auto-label { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; flex-shrink: 1; min-width: 0; }
.kindle-auto-select { .kindle-auto-select {
height: 32px; padding: 0 var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border); height: 32px; padding: 0 var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border);
background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-weight: 500; font-family: var(--font); background: var(--card); color: var(--text-1); font-size: var(--text-sm); font-weight: 500; font-family: var(--font);