From 683df43b95b386bedd69c355f7ef23a77e6d9332 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 27 Feb 2026 14:36:27 -0800
Subject: [PATCH] fix: move toolbar collapse toggle to bottom as subtle pill

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 website/canvas.html | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/website/canvas.html b/website/canvas.html
index f271408..a956962 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -136,19 +136,25 @@
 				color: white;
 			}
 
-			/* Collapse/expand toggle */
+			/* Collapse/expand toggle — small pill at bottom of toolbar */
 			#toolbar-collapse {
-				padding: 7px 8px !important;
+				padding: 4px 0 !important;
 				background: transparent !important;
-				font-size: 16px !important;
+				font-size: 11px !important;
 				line-height: 1;
-				opacity: 0.6;
+				opacity: 0.4;
 				transition: opacity 0.2s;
+				text-align: center;
+				letter-spacing: 2px;
+				color: #94a3b8;
+				order: 999; /* always last */
+				margin-top: auto;
 			}
 
 			#toolbar-collapse:hover {
 				opacity: 1;
 				background: #f1f5f9 !important;
+				color: #0f172a;
 			}
 
 			#toolbar.collapsed .toolbar-group,
@@ -162,6 +168,12 @@
 				overflow: visible;
 			}
 
+			#toolbar.collapsed #toolbar-collapse {
+				opacity: 0.7;
+				font-size: 14px !important;
+				padding: 4px 6px !important;
+			}
+
 			#community-info {
 				position: fixed;
 				top: 72px;
@@ -607,8 +619,6 @@
 		</div>
 
 		<div id="toolbar">
-			<button id="toolbar-collapse" title="Minimize toolbar">▲</button>
-
 			<div class="toolbar-group">
 				<button class="toolbar-group-toggle">✏️ Draw</button>
 				<div class="toolbar-dropdown">
@@ -732,6 +742,8 @@
 					<button id="reset-view" title="Reset View">⟳ Reset View</button>
 				</div>
 			</div>
+
+			<button id="toolbar-collapse" title="Minimize toolbar">···</button>
 		</div>
 
 		<div id="memory-panel">
@@ -2202,7 +2214,7 @@
 			const collapseBtn = document.getElementById("toolbar-collapse");
 			collapseBtn.addEventListener("click", () => {
 				const isCollapsed = toolbarEl.classList.toggle("collapsed");
-				collapseBtn.textContent = isCollapsed ? "▼" : "▲";
+				collapseBtn.textContent = isCollapsed ? "▶" : "···";
 				collapseBtn.title = isCollapsed ? "Expand toolbar" : "Minimize toolbar";
 			});