From 611815628e6d2868cc81239836852507d9bcc2f3 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Mon, 19 Jan 2026 19:28:46 +0100
Subject: [PATCH] fix(ui): improve monitor panel icons and width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/web/public/app.js     | 4 ++--
 src/web/public/index.html | 4 ++--
 src/web/public/styles.css | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index fbd0049c..36a90465 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -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
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 8b29c5f3..171f1c2b 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -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>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 3dde1af0..b9f722a3 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -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);