From c23d7eb65babc64326439fb7fe3477ee99b1df3a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 20 Mar 2026 21:54:50 -0700
Subject: [PATCH] fix(canvas): reminder widget expands from schedule icon
 position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of popping up at fixed top-right, the reminder mini-calendar
now appears at the 📅 icon's location and scales out from it.
Icon hides while widget is open, reappears on close.
Viewport-clamped to prevent off-screen overflow.

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

diff --git a/website/canvas.html b/website/canvas.html
index ca6b60a..424e186 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -2316,17 +2316,17 @@
 		<!-- Reminder mini-calendar widget -->
 		<style>
 			#reminder-widget {
-				position: fixed; top: 108px; right: 16px; z-index: 1001;
+				position: fixed; z-index: 1001;
 				background: var(--rs-toolbar-bg, #1a1a2e); border: 1px solid #333;
 				border-radius: 14px; padding: 14px; width: 260px;
 				box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-				opacity: 0; transform: translateY(-8px) scale(0.96);
+				opacity: 0; transform: scale(0.3); transform-origin: top left;
 				pointer-events: none; transition: opacity 0.2s, transform 0.2s;
 				font-family: system-ui, -apple-system, sans-serif;
 				color: var(--rs-text, #e0e0e0);
 			}
 			#reminder-widget.visible {
-				opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
+				opacity: 1; transform: scale(1); pointer-events: auto;
 			}
 			.rw-header { font-size: 12px; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
 			.rw-header-icon { font-size: 16px; }
@@ -3118,7 +3118,17 @@
 								ev.stopPropagation();
 								if (rwWidget.classList.contains("visible")) {
 									rwWidget.classList.remove("visible");
+									scheduleIconEl.classList.add("visible");
 								} else {
+									// Position widget at the icon, then hide the icon
+									const iconRect = scheduleIconEl.getBoundingClientRect();
+									const ww = 260 + 28; // widget width + padding
+									const wh = 340; // approx widget height
+									const left = Math.min(iconRect.left, window.innerWidth - ww);
+									const top = Math.min(Math.max(iconRect.top, 8), window.innerHeight - wh);
+									rwWidget.style.left = left + "px";
+									rwWidget.style.top = top + "px";
+									scheduleIconEl.classList.remove("visible");
 									updateReminderWidget();
 								}
 							});