From d7acc93872b268c23e53f1a0e45e592b3e9ba7bc Mon Sep 17 00:00:00 2001
From: Stewart Allen <stewart.allen@gmail.com>
Date: Sun, 12 Oct 2025 19:23:28 -0400
Subject: [PATCH] fix overflowing ops lists and popup positioning

---
 src/kiri/mode/cam/client.js | 33 ++++++++++++++++++---------------
 web/kiri/index.css          | 10 +++++++---
 web/kiri/index.html         |  2 +-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/kiri/mode/cam/client.js b/src/kiri/mode/cam/client.js
index aa847a64..8f6af172 100644
--- a/src/kiri/mode/cam/client.js
+++ b/src/kiri/mode/cam/client.js
@@ -320,6 +320,7 @@ export function opRender() {
             el.classList.add("disabled");
         }
         bounds.push(el);
+        let parent = $('camops');
         let timer = null;
         let inside = true;
         let popped = false;
@@ -329,14 +330,14 @@ export function opRender() {
         }
         el.rec = rec;
         el.unpop = () => {
-            let pos = [...el.childNodes].indexOf(poprec.div);
+            let pos = [...parent.childNodes].indexOf(poprec.div);
             if (pos >= 0) {
-                el.removeChild(poprec.div);
+                parent.removeChild(poprec.div);
             }
             popped = false;
         };
         function onEnter(ev) {
-            if ((surfaceOn || traceOn) && env.poppedRec != rec) {
+            if ((clock || surfaceOn || traceOn) && env.poppedRec != rec) {
                 return;
             }
             if (popped && env.poppedRec != rec) {
@@ -351,22 +352,24 @@ export function opRender() {
             popped = true;
             poprec.use(rec);
             env.hoveredOp = el;
-            if (!clock) {
-                // offset Y position of pop div by % of Y screen location of button
-                el.appendChild(poprec.div);
-                poprec.addNote();
-                const { innerHeight } = window;
-                const brect = ev.target.getBoundingClientRect();
-                const prect = poprec.div.getBoundingClientRect();
-                const pcty = (brect.top / innerHeight) * 0.9;
-                const offpx = -pcty * prect.height;
-                poprec.div.style.transform = `translateY(${offpx}px)`;
-            }
+            // offset Y position of pop div by % of Y screen location of button
+            parent.appendChild(poprec.div);
+            poprec.addNote();
+            const { innerHeight } = window;
+            const brect = ev.target.getBoundingClientRect();
+            const prect = parent.getBoundingClientRect();
+            const Prect = poprec.div.getBoundingClientRect();
+            const tdiff = prect.top - brect.top;
+            const botoff = innerHeight - (brect.top + Prect.height);
+            const offpx = -tdiff + (botoff < 0 ? botoff : -Prect.height/3);
+            poprec.div.style.transform = `translateY(${offpx}px)`;
+            poprec.div.onmouseenter = () => { inside = true };
+            poprec.div.onmouseleave = onLeave;
             // option click event appears latent
             // and overides the sticky settings
             setTimeout(() => {
                 UC.setSticky(false);
-            }, 0);
+            }, 10);
         }
         function onLeave(ev) {
             inside = false;
diff --git a/web/kiri/index.css b/web/kiri/index.css
index aa19ea56..ad3b7705 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -1375,12 +1375,16 @@ details[open] summary::after {
 }
 #camops {
     display: flex;
-    padding: 5px 0 0 0;
+    padding: 0 0 0 0;
+}
+#oplist {
     max-height: 70vh;
-    /* overflow-y: auto; */
+    min-height: 0;
+    overflow-y: auto;
+    padding-top: 1px;
 }
 .cam-pop-op {
-    top: 50%;
+    top: 0;
     right: calc(100% + 4px);
     text-align: left;
     position: absolute;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index 2fcce519..598e6ad5 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -420,7 +420,7 @@
                 <div class="set2-group f-col mode-cam">
                     <div class="set-header mode-cam"><a>operation list</a></div>
                     <div id="camops" class="f-col a-stretch grow">
-                        <div id="oplist" class="f-col j-center"></div>
+                        <div id="oplist" class="f-col"></div>
                         <div id="op-add" class="opdiv">
                             <i class="fas fa-plus"></i>
                             <div id="op-add-pop" class="f-col">