fix: mode-select row layout so tools toggle doesn't push textarea down
- #mode-select changed from flex column to flex row (desktop + mobile unified) - Chat/⚡ buttons now sit side-by-side at the same height as the textarea - Removed stale mode-agent CSS rules (mode removed in prior commit) - Mobile: simplified override — flex:1 only, direction/align already desktop default Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -635,8 +635,8 @@
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@@ -654,10 +654,9 @@
|
||||
white-space: nowrap;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
#mode-select-btn:hover { border-color: var(--muted); color: var(--text); }
|
||||
#mode-select-btn.mode-note { border-color: rgba(180,130,40,0.6); color: #c9a84c; }
|
||||
#mode-select-btn.mode-otr { border-color: rgba(120,80,160,0.6); color: #a87fd4; }
|
||||
#mode-select-btn.mode-agent { border-color: rgba(80,140,200,0.6); color: #7cb9e8; }
|
||||
#mode-select-btn:hover { border-color: var(--muted); color: var(--text); }
|
||||
#mode-select-btn.mode-note { border-color: rgba(180,130,40,0.6); color: #c9a84c; }
|
||||
#mode-select-btn.mode-otr { border-color: rgba(120,80,160,0.6); color: #a87fd4; }
|
||||
|
||||
#mode-icon { display: flex; align-items: center; }
|
||||
.mode-arrow { font-size: 0.55rem; color: var(--muted); margin-left: 2px; opacity: 0.5; }
|
||||
@@ -757,8 +756,7 @@
|
||||
#input.mode-note:focus { border-color: rgba(180,130,40,0.85); }
|
||||
#input.mode-note.public { border-color: rgba(40,170,150,0.55); }
|
||||
#input.mode-note.public:focus { border-color: rgba(40,170,150,0.85); }
|
||||
#input.mode-otr { border-color: rgba(120,80,160,0.4); background: rgba(120,80,160,0.04); }
|
||||
#input.mode-agent { border-color: rgba(80,140,200,0.4); }
|
||||
#input.mode-otr { border-color: rgba(120,80,160,0.4); background: rgba(120,80,160,0.04); }
|
||||
|
||||
/* Send column — right side, stacked */
|
||||
#send-col {
|
||||
@@ -1517,17 +1515,10 @@
|
||||
font-size: 16px; /* prevent iOS Safari auto-zoom */
|
||||
}
|
||||
|
||||
/* Mode select: row layout (btn left, note-vis right) */
|
||||
#mode-select {
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
/* Mode select: grows to fill left side of bottom row */
|
||||
#mode-select { flex: 1; }
|
||||
#mode-select-btn { flex: 1; justify-content: center; }
|
||||
|
||||
/* Note vis button sits to the right of the mode btn on mobile */
|
||||
#note-vis-btn { margin-top: 0; }
|
||||
|
||||
/* Dropdown still opens upward on mobile */
|
||||
#mode-dropdown { min-width: 140px; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user