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:
Scott Idem
2026-04-28 20:44:46 -04:00
parent 80702a21e2
commit e2a61bb78d

View File

@@ -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; }