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:
@@ -647,8 +647,8 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: stretch;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1527,8 +1527,8 @@
|
|||||||
font-size: 16px; /* prevent iOS Safari auto-zoom */
|
font-size: 16px; /* prevent iOS Safari auto-zoom */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mode select: grows to fill left side of bottom row */
|
/* Mode select: grows to fill left side of bottom row; back to row on mobile */
|
||||||
#mode-select { flex: 1; }
|
#mode-select { flex: 1; flex-direction: row; align-items: center; }
|
||||||
#mode-select-btn { flex: 1; justify-content: center; }
|
#mode-select-btn { flex: 1; justify-content: center; }
|
||||||
|
|
||||||
/* Dropdown still opens upward on mobile */
|
/* Dropdown still opens upward on mobile */
|
||||||
@@ -1602,3 +1602,8 @@
|
|||||||
.header-emoji { font-size: 1.3rem; }
|
.header-emoji { font-size: 1.3rem; }
|
||||||
.hdr-btn { padding: 5px 8px; }
|
.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; }
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user