Move status message to left side of header on mobile

Align header-col-center to flex-start on mobile so the status and
final-turn badges sit flush left. Match final-turn-badge border-radius
and padding to status-message for consistent shape.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken 2026-02-22 21:26:31 -05:00
parent 873bdfc75a
commit cb311ec0da

View File

@ -1691,8 +1691,8 @@ input::placeholder {
gap: 6px; gap: 6px;
background: linear-gradient(135deg, #ff6b35 0%, #d63031 100%); background: linear-gradient(135deg, #ff6b35 0%, #d63031 100%);
color: #fff; color: #fff;
padding: 6px 14px; padding: 6px 16px;
border-radius: 8px; border-radius: 4px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.05em; letter-spacing: 0.05em;
white-space: nowrap; white-space: nowrap;
@ -5097,12 +5097,15 @@ body.mobile-portrait #matchmaking-screen {
margin-top: 50px; margin-top: 50px;
} }
body.mobile-portrait .header-col-center {
justify-content: flex-start;
}
body.mobile-portrait .status-message { body.mobile-portrait .status-message {
font-size: 1.02rem; font-size: 1.02rem;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: left;
} }
body.mobile-portrait .round-info { body.mobile-portrait .round-info {