diff --git a/frontend/app/globals.css b/frontend/app/globals.css index a6457fe..15ff479 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -1399,19 +1399,86 @@ button span { } @media (max-width: 720px) { + .page { + padding: 28px 18px 60px; + gap: 24px; + } + .header { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-items: flex-start; } + .header-left { + width: 100%; + } + + .brand-link { + width: 100%; + gap: 12px; + } + + .brand-logo--header { + width: 64px; + height: 64px; + } + + .brand { + font-size: 26px; + } + + .tagline { + font-size: 13px; + } + .header-right { grid-column: 1 / -1; justify-content: flex-start; + width: 100%; + flex-wrap: wrap; + gap: 10px; } .header-nav { justify-content: flex-start; + width: 100%; + } + + .signed-in-menu { + width: 100%; + } + + .signed-in { + width: 100%; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .signed-in-dropdown { + position: static; + width: 100%; + margin-top: 8px; + } + + .header-actions { + width: 100%; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + } + + .header-actions a, + .header-actions .header-link { + font-size: 12px; + padding: 8px 10px; + } + + .header-actions .header-cta--left { + grid-column: 1 / -1; + margin-right: 0; } .summary { @@ -1451,6 +1518,12 @@ button span { } } +@media (max-width: 480px) { + .header-actions { + grid-template-columns: 1fr; + } +} + /* Loading spinner */ .loading-center { display: flex;