feat: vertical mode-select column on desktop

Stack Chat/Note/OTR button and tools toggle vertically (flex-direction:
column, align-items: stretch) on desktop so they share a tidy left column.
Mobile (≤520px) restores row layout; landscape phone (≤400px height) also
reverts to row to avoid crowding a short viewport.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-28 21:14:16 -04:00
parent af4d78136a
commit 93a692f3f0

View File

@@ -647,8 +647,8 @@
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
align-items: stretch;
gap: 4px;
}
@@ -1527,8 +1527,8 @@
font-size: 16px; /* prevent iOS Safari auto-zoom */
}
/* Mode select: grows to fill left side of bottom row */
#mode-select { flex: 1; }
/* Mode select: grows to fill left side of bottom row; back to row on mobile */
#mode-select { flex: 1; flex-direction: row; align-items: center; }
#mode-select-btn { flex: 1; justify-content: center; }
/* Dropdown still opens upward on mobile */
@@ -1602,3 +1602,8 @@
.header-emoji { font-size: 1.3rem; }
.hdr-btn { padding: 5px 8px; }
}
/* ── Short viewport (landscape phone) — restore row layout ── */
@media (max-height: 400px) and (min-width: 521px) {
#mode-select { flex-direction: row; align-items: center; }
}