fix(ui): improve monitor panel icons and width

- Change toggle icon to show ▲ when closed, ▼ when open
- Update detach/attach icons: ⧉ (detach) and ⊞ (attach)
- Adjust panel width to 380px

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-19 19:28:46 +01:00
co-authored by Claude Opus 4.5
parent 0d2e1f20a9
commit 611815628e
3 changed files with 5 additions and 5 deletions
+2 -2
View File
@@ -1797,7 +1797,7 @@ class ClaudemanApp {
panel.style.width = '';
panel.style.height = '';
if (detachBtn) {
detachBtn.innerHTML = '&#x2197;'; // Detach icon
detachBtn.innerHTML = '&#x29C9;'; // Detach icon (two overlapping squares)
detachBtn.title = 'Detach panel';
}
} else {
@@ -1805,7 +1805,7 @@ class ClaudemanApp {
panel.classList.add('detached');
panel.classList.add('open'); // Ensure it's visible
if (detachBtn) {
detachBtn.innerHTML = '&#x2199;'; // Attach icon
detachBtn.innerHTML = '&#x229E;'; // Attach icon (squared plus - dock back)
detachBtn.title = 'Attach panel';
}
// Setup drag functionality
+2 -2
View File
@@ -240,8 +240,8 @@
<div class="monitor-panel-actions">
<button class="btn-toolbar btn-sm btn-danger" onclick="app.killAllSessions()" title="Kill all sessions and their screen processes">Kill All</button>
<button class="btn-icon-sm" onclick="app.reconcileScreens()" title="Refresh screens">&#x21BB;</button>
<button class="btn-icon-sm" onclick="app.toggleMonitorDetach()" title="Detach/Attach panel" id="monitorDetachBtn">&#x2197;</button>
<button class="btn-icon-sm" onclick="app.toggleMonitorPanel()" title="Toggle panel" id="monitorToggleBtn">&#x25BC;</button>
<button class="btn-icon-sm" onclick="app.toggleMonitorDetach()" title="Detach panel" id="monitorDetachBtn">&#x29C9;</button>
<button class="btn-icon-sm" onclick="app.toggleMonitorPanel()" title="Toggle panel" id="monitorToggleBtn">&#x25B2;</button>
</div>
</div>
<div class="monitor-resize-handle" id="monitorResizeHandle"></div>
+1 -1
View File
@@ -2345,7 +2345,7 @@ kbd {
position: fixed;
bottom: var(--toolbar-height);
right: 0.5rem;
width: 320px;
width: 380px;
max-width: calc(100vw - 1rem);
max-height: 80vh;
background: var(--bg-card);