diff --git a/frontend/src/App.css b/frontend/src/App.css index 50e22d6..f1ef26d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -3434,6 +3434,109 @@ a.app-footer__repo:hover { } } +/* ── Mobile narrow (≤480px) — Creator detail page ─────────────────────── */ + +@media (max-width: 480px) { + /* Stats bar: smaller text, tighter spacing */ + .creator-detail__stats-bar { + gap: 0.25rem 0.375rem; + font-size: 0.8125rem; + } + + .creator-detail__stats { + font-size: 0.75rem; + } + + .creator-detail__stats-sep { + margin: 0; + } + + /* Topic pills: ensure wrap, smaller badges */ + .creator-detail__topic-pills { + gap: 0.25rem; + } + + .creator-detail__topic-pills .badge { + font-size: 0.6875rem; + padding: 0.125rem 0.375rem; + } + + /* Hero: tighter on very narrow screens */ + .creator-hero__name { + font-size: 1.25rem; + } + + .creator-hero__bio { + font-size: 0.875rem; + } + + .creator-hero__socials { + gap: 0.375rem; + } + + .creator-hero__genres { + gap: 0.25rem; + } + + /* Featured card: reduce padding, contain text */ + .creator-featured { + padding: 0.875rem 1rem; + } + + .creator-featured__title { + font-size: 1.0625rem; + } + + .creator-featured__summary { + font-size: 0.8125rem; + } + + /* Techniques header: wrap title + sort */ + .creator-techniques__header { + flex-wrap: wrap; + gap: 0.375rem; + } + + .creator-techniques__title { + font-size: 1.0625rem; + } + + /* Technique cards: smaller padding */ + .creator-technique-card { + padding: 0.625rem 0.75rem; + } + + .creator-technique-card__title { + font-size: 0.875rem; + } + + /* Edit form: full width, stacked link rows */ + .creator-edit-form { + max-width: 100%; + } + + .creator-edit-form__link-row { + flex-wrap: wrap; + } + + .creator-edit-form__platform-select { + flex: 1 1 100%; + } + + .creator-edit-form__url-input { + flex: 1 1 100%; + } + + .creator-edit-form__actions { + flex-wrap: wrap; + } + + .creator-edit-form__actions .btn { + flex: 1; + text-align: center; + } +} + /* ── Report Issue Modal ─────────────────────────────────────────────────── */ .modal-overlay {