rails-markup 1.4.2 → 1.4.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34e44f1b30e4c51432e862ee09efd9d1f72e906a41e0e38f9c7553267f737d6f
-  data.tar.gz: '0909684467d87ed6a1248657ea2fc0e120956b66203c55b47750e74b57971bcb'
+  metadata.gz: 385e2a5ce158bd1832873c6edb4ec22f689209b7e5c7ceb33ac500c3a5e4e4fc
+  data.tar.gz: be53ae296ff60727333058950f374ebf80a57e2e85a953db216614aeb2837c1b
 SHA512:
-  metadata.gz: ea571e4c90037645f9f81ddc6e95710ffd6333addee88f6b43b3352ee8be8bcf9afb9b4d0d2868965f30825c370bf668a6e3a61e7fe345c6ae2469e8e205216c
-  data.tar.gz: ec0f2ff1ae946b95e7e6c6a7c0fb90429faa8bab7e8cbe30763a09440056760ab9049aed14b296a36c52095f9c1eae5d45941c6a1ccae8bcc346e5f12d03a5d3
+  metadata.gz: 33bd8549180fb872d8a5cb07d68ce154e9df3fd82a2e6f36e16f36c434d2f2c82f6583977ca0e623b4c705b0054ed9e60d523db2fcfbab2f601fa5cb4548a690
+  data.tar.gz: 78cf0596ec74242a08857c23b1cc27deb2594616a497157b60cb2f561726f628f5fd5c4ed5be40d9e0aa16074300ad024f09caa4a09c86f734a7df83975ee34a

data/README.md

@@ -33,6 +33,24 @@ bin/rails railties:install:migrations FROM=rails_markup
 bin/rails db:migrate
 ```
 
+### Compatibility: `connection_pool` 3.x
+
+Rails Markup does **not** use Redis or `connection_pool`. However, Rails 7.2 and
+Rails 8.0 apps configured with `:redis_cache_store` fail to boot against
+`connection_pool` 3.x (released Dec 2025): Active Support passes pool options as
+a positional hash, while `connection_pool` 3 requires keyword arguments, raising
+`ArgumentError: wrong number of arguments (given 1, expected 0)` during
+`Rails.application.initialize!`. This is an upstream Rails/`connection_pool`
+incompatibility (fixed in Rails 8.1), unrelated to this gem — but because it
+breaks boot, it will also break `bin/dev`, `db:migrate`, and the migration-copy
+step above whenever this gem happens to be installed.
+
+If you hit it, pin the dependency in your app's Gemfile until you're on Rails 8.1+:
+
+```ruby
+gem "connection_pool", "< 3.0"
+```
+
 ### Rails Markup 1.2 rolling UUID upgrade
 
 The 1.2 upgrade migration adds, repairs, and uniquely indexes `client_uuid`, but

data/app/assets/javascripts/rails_markup/toolbar.js

@@ -106,6 +106,7 @@
     },
 
     destroy() {
+      this._closeAllMenus();
       this._deactivateMode();
       if (this.sseSource) { this.sseSource.close(); this.sseSource = null; }
       if (this.healthInterval) { clearInterval(this.healthInterval); this.healthInterval = null; }
@@ -120,12 +121,27 @@
         window.removeEventListener("online", this._boundOnline);
         this._boundOnline = null;
       }
+      if (this._boundKeyDown) {
+        document.removeEventListener("keydown", this._boundKeyDown, true);
+        this._boundKeyDown = null;
+      }
       if (this._onResize) window.removeEventListener("resize", this._onResize);
       if (this._onScroll) window.removeEventListener("scroll", this._onScroll);
       if (this._boundTurboFrame) {
         document.removeEventListener("turbo:frame-render", this._boundTurboFrame);
         this._boundTurboFrame = null;
       }
+      if (this._boundMenuDocClick) {
+        document.removeEventListener("click", this._boundMenuDocClick);
+        this._boundMenuDocClick = null;
+      }
+      if (this._boundMenuViewportChange) {
+        document.getElementById("rm-panel-list")
+          ?.removeEventListener("scroll", this._boundMenuViewportChange);
+        window.removeEventListener("resize", this._boundMenuViewportChange);
+        window.removeEventListener("scroll", this._boundMenuViewportChange);
+        this._boundMenuViewportChange = null;
+      }
       this._onResize = null;
       this._onScroll = null;
       const root = document.getElementById("rm-toolbar-root");
@@ -159,19 +175,30 @@
         .rm-pins-container { position:absolute; top:0; left:0; width:100%; z-index:9979; pointer-events:none; }
         .rm-pin { pointer-events:auto; }
         .rm-popup { display:none; position:fixed; z-index:9982; width:360px; max-width:calc(100vw - 24px); background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); padding:16px; }
-        .rm-popup textarea { width:100%; font-size:13px; border:1px solid #e5e7eb; border-radius:12px; padding:12px; resize:none; outline:none; font-family:inherit; transition:border-color 0.15s,box-shadow 0.15s; }
-        .rm-popup textarea:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
-        #rm-toolbar-root .rm-popup select { display:inline-block; width:auto; visibility:visible; opacity:1; font-size:11px; font-weight:500; line-height:1.4; color:#374151; height:auto; margin:0; border:1px solid #e5e7eb; border-top:1px solid #e5e7eb; border-right:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; border-left:1px solid #e5e7eb; border-radius:8px; padding:6px 24px 6px 8px; background:#fff; background-image:none; box-shadow:none; outline:none; text-transform:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; }
-        #rm-toolbar-root .rm-popup select:focus { outline:none; border:1px solid #818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
-        #rm-toolbar-root .rm-popup select:hover { border:1px solid #d1d5db; background:#fff; }
+        #rm-toolbar-root .rm-popup textarea { display:block; width:100%; max-width:100%; font-size:13px; font-weight:400; line-height:1.4; color:#1f2937; height:auto; margin:0; border:1px solid #e5e7eb; border-radius:12px; padding:12px; resize:none; outline:none; font-family:inherit; background:#fff; background-image:none; box-shadow:none; appearance:none; -webkit-appearance:none; transition:border-color 0.15s,box-shadow 0.15s; }
+        #rm-toolbar-root .rm-popup textarea:focus { border:1px solid #818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
+        #rm-toolbar-root .rm-menu { position:relative; display:inline-block; vertical-align:middle; }
+        #rm-toolbar-root .rm-menu-btn { display:inline-flex; align-items:center; gap:4px; width:auto; height:auto; margin:0; font-size:11px; font-weight:500; line-height:1.4; color:#374151; border:1px solid #e5e7eb; border-radius:8px; padding:6px 8px; background:#fff; background-image:none; box-shadow:none; outline:none; text-transform:none; appearance:none; -webkit-appearance:none; cursor:pointer; }
+        #rm-toolbar-root .rm-menu-btn:hover { border-color:#d1d5db; background:#fff; }
+        #rm-toolbar-root .rm-menu-btn:focus { outline:none; border-color:#818cf8; box-shadow:0 0 0 3px rgba(99,102,241,0.1); }
+        #rm-toolbar-root .rm-menu-btn[aria-expanded="true"] { border-color:#818cf8; }
+        #rm-toolbar-root .rm-menu-chevron { width:10px; height:10px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.55; }
+        #rm-toolbar-root .rm-menu-list { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:9984; min-width:100%; padding:4px; margin:0; list-style:none; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
+        #rm-toolbar-root .rm-menu-list.rm-menu-open { display:block; }
+        #rm-toolbar-root .rm-menu-option { display:block; width:100%; margin:0; padding:6px 10px; font-size:11px; font-weight:500; line-height:1.4; color:#374151; text-align:left; border:none; border-radius:6px; background:transparent; background-image:none; box-shadow:none; cursor:pointer; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-menu-option:hover, #rm-toolbar-root .rm-menu-option:focus { background:#f3f4f6; outline:none; }
+        #rm-toolbar-root .rm-menu-option-active { background:#eef2ff; color:#4338ca; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-btn { font-size:10px; padding:2px 6px; border-radius:4px; color:#6b7280; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-list, #rm-toolbar-root .rm-menu-list-compact { min-width:120px; right:0; left:auto; }
+        #rm-toolbar-root .rm-menu-compact .rm-menu-option, #rm-toolbar-root .rm-menu-list-compact .rm-menu-option { font-size:10px; padding:5px 8px; }
         .rm-popup-el { font-size:11px; color:#9ca3af; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.4; }
         .rm-popup-text { font-size:12px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; line-height:1.4; }
         .rm-popup-actions { display:flex; align-items:center; gap:8px; margin-top:8px; }
         .rm-popup-actions .rm-count { font-size:10px; color:#d1d5db; margin-left:auto; font-variant-numeric:tabular-nums; }
-        .rm-btn-cancel { padding:6px 12px; font-size:12px; color:#9ca3af; background:none; border:none; cursor:pointer; border-radius:8px; }
-        .rm-btn-cancel:hover { color:#6b7280; }
-        .rm-btn-submit { padding:6px 16px; font-size:12px; font-weight:500; color:#fff; border:none; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
-        .rm-btn-submit kbd { font-size:9px; opacity:0.6; font-family:sans-serif; }
+        #rm-toolbar-root .rm-btn-cancel { padding:6px 12px; font-size:12px; color:#9ca3af; background:none; background-image:none; border:none; box-shadow:none; cursor:pointer; border-radius:8px; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-btn-cancel:hover { color:#6b7280; }
+        #rm-toolbar-root .rm-btn-submit { padding:6px 16px; font-size:12px; font-weight:500; color:#fff; border:none; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; box-shadow:none; appearance:none; -webkit-appearance:none; }
+        #rm-toolbar-root .rm-btn-submit kbd { font-size:9px; opacity:0.6; font-family:sans-serif; }
         .rm-panel { display:none; position:fixed; z-index:9981; width:380px; max-width:calc(100vw - 48px); max-height:60vh; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.1); border:1px solid rgba(229,231,235,0.8); flex-direction:column; }
         .rm-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #f3f4f6; }
         .rm-panel-header h3 { font-size:14px; font-weight:600; color:#1f2937; }
@@ -252,17 +279,8 @@
           </div>
           <textarea id="rm-popup-input" rows="3" placeholder="What should change?"></textarea>
           <div style="display:flex;align-items:center;gap:8px;margin-top:12px">
-            <select id="rm-intent-select">
-              <option value="fix">Fix</option>
-              <option value="change" selected>Change</option>
-              <option value="question">Question</option>
-              <option value="approve">Approve</option>
-            </select>
-            <select id="rm-severity-select">
-              <option value="suggestion" selected>Suggestion</option>
-              <option value="important">Important</option>
-              <option value="blocking">Blocking</option>
-            </select>
+            ${this._menuMarkup({ inputId: "rm-intent-select", label: "Intent", value: "change", options: this._intentOptions() })}
+            ${this._menuMarkup({ inputId: "rm-severity-select", label: "Severity", value: "suggestion", options: this._severityOptions() })}
             <span class="rm-count" id="rm-char-count"></span>
           </div>
           <div class="rm-popup-actions">
@@ -324,15 +342,43 @@
         if (chip) self._filterAnnotations(chip.dataset.filter);
       });
 
+      // Custom menus (intent/severity/status) — button+menu, never native selects
+      // so host FormSelect/Select2 enhancers cannot rewrite our DOM (#4).
+      this.root.addEventListener("click", (e) => {
+        const option = e.target.closest(".rm-menu-option");
+        if (option) {
+          e.preventDefault();
+          e.stopPropagation();
+          this._selectMenuOption(option);
+          return;
+        }
+        const btn = e.target.closest(".rm-menu-btn");
+        if (btn) {
+          e.preventDefault();
+          e.stopPropagation();
+          const menu = this._menuForElement(btn);
+          if (!menu || !this.root.contains(menu)) return;
+          this._toggleMenu(menu);
+          return;
+        }
+        if (!this._menuForElement(e.target)) this._closeAllMenus();
+      });
+      if (!this._boundMenuDocClick) {
+        this._boundMenuDocClick = (e) => {
+          if (!this.root || this._menuForElement(e.target)) return;
+          this._closeAllMenus();
+        };
+        document.addEventListener("click", this._boundMenuDocClick);
+      }
+
       // Event delegation for cards (status change, edit, delete, or click scrolls to element)
       const panelList = document.getElementById("rm-panel-list");
-      panelList.addEventListener("change", (e) => {
-        const select = e.target.closest("[data-status-id]");
-        if (!select) return;
-        e.stopPropagation();
-        const id = parseInt(select.dataset.statusId, 10);
-        self._changeStatus(id, select.value);
-      });
+      if (!this._boundMenuViewportChange) {
+        this._boundMenuViewportChange = () => self._closeAllMenus();
+        window.addEventListener("resize", this._boundMenuViewportChange);
+        window.addEventListener("scroll", this._boundMenuViewportChange, { passive: true });
+      }
+      panelList.addEventListener("scroll", this._boundMenuViewportChange, { passive: true });
       panelList.addEventListener("click", (e) => {
         const retryBtn = e.target.closest("[data-retry-client-id]");
         if (retryBtn) {
@@ -340,8 +386,8 @@
           self._retrySync(retryBtn.dataset.retryClientId);
           return;
         }
-        // Status dropdown click — don't scroll
-        if (e.target.closest("[data-status-id]")) { e.stopPropagation(); return; }
+        // Status menu — leave bubbling for the root menu handler; don't scroll.
+        if (e.target.closest(".rm-menu")) return;
         // Edit button
         const editBtn = e.target.closest("[data-edit-id]");
         if (editBtn) {
@@ -382,7 +428,10 @@
       this._boundMouseDown = (e) => self._handleMouseDown(e);
       this._boundMouseUp = (e) => self._handleMouseUp(e);
       this._boundClick = (e) => self._handleClick(e);
-      this._boundKeyDown = (e) => self._handleKeyDown(e);
+      if (!this._boundKeyDown) {
+        this._boundKeyDown = (e) => self._handleKeyDown(e);
+        document.addEventListener("keydown", this._boundKeyDown, true);
+      }
       this._boundTouchStart = (e) => { if (self.active && e.touches[0]) { const t = e.touches[0]; const el = document.elementFromPoint(t.clientX, t.clientY); if (el && !self._isToolbar(el) && e.cancelable) e.preventDefault(); self._handleMouseDown({ clientX: t.clientX, clientY: t.clientY }); } };
       this._boundTouchEnd = (e) => { if (self.active && e.changedTouches[0]) { const t = e.changedTouches[0]; const el = document.elementFromPoint(t.clientX, t.clientY); if (el && !self._isToolbar(el)) { e.preventDefault(); self._handleMouseUp({ clientX: t.clientX, clientY: t.clientY, preventDefault(){}, stopPropagation(){} }); } } };
 
@@ -458,7 +507,6 @@
       document.addEventListener("mousedown", this._boundMouseDown, true);
       document.addEventListener("mouseup", this._boundMouseUp, true);
       document.addEventListener("click", this._boundClick, true);
-      document.addEventListener("keydown", this._boundKeyDown, true);
       document.addEventListener("touchstart", this._boundTouchStart, true);
       document.addEventListener("touchend", this._boundTouchEnd, true);
     },
@@ -478,7 +526,6 @@
       document.removeEventListener("mousedown", this._boundMouseDown, true);
       document.removeEventListener("mouseup", this._boundMouseUp, true);
       document.removeEventListener("click", this._boundClick, true);
-      document.removeEventListener("keydown", this._boundKeyDown, true);
       document.removeEventListener("touchstart", this._boundTouchStart, true);
       document.removeEventListener("touchend", this._boundTouchEnd, true);
       this._removeHighlight();
@@ -551,12 +598,69 @@
     },
 
     _handleKeyDown(event) {
+      const openList = this.root?.querySelector(".rm-menu-list.rm-menu-open");
+      const openMenu = this._menuForElement(openList);
+      if (openMenu) {
+        const options = Array.from(openList.querySelectorAll(".rm-menu-option"));
+        const focusedIndex = options.indexOf(document.activeElement);
+
+        if (event.key === "Escape") {
+          this._closeMenu(openMenu, true);
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (event.key === "Tab") {
+          this._closeMenu(openMenu);
+          return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          const direction = event.key === "ArrowDown" ? 1 : -1;
+          const start = focusedIndex === -1 ? 0 : focusedIndex;
+          const next = (start + direction + options.length) % options.length;
+          options[next]?.focus();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (event.key === "Home" || event.key === "End") {
+          const option = event.key === "Home" ? options[0] : options[options.length - 1];
+          option?.focus();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if ((event.key === "Enter" || event.key === " ") && focusedIndex !== -1) {
+          this._selectMenuOption(options[focusedIndex]);
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+
+      const trigger = event.target.closest?.(".rm-menu-btn");
+      if (trigger && this.root?.contains(trigger) &&
+          ["Enter", " ", "ArrowDown", "ArrowUp"].includes(event.key)) {
+        const menu = this._menuForElement(trigger);
+        if (menu) this._openMenu(menu);
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
       if (event.key === "Escape") {
         const popup = document.getElementById("rm-popup");
         if (popup && popup.style.display === "block") {
           this._closePopup();
-        } else {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (this.active) {
           this._deactivateMode();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
         }
       }
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
@@ -602,6 +706,192 @@
 
     // ---- Popup ----
 
+    _intentOptions() {
+      return [
+        ["fix", "Fix"],
+        ["change", "Change"],
+        ["question", "Question"],
+        ["approve", "Approve"]
+      ];
+    },
+
+    _severityOptions() {
+      return [
+        ["suggestion", "Suggestion"],
+        ["important", "Important"],
+        ["blocking", "Blocking"]
+      ];
+    },
+
+    _statusOptions() {
+      return [
+        ["pending", "Pending"],
+        ["acknowledged", "Acknowledged"],
+        ["resolved", "Resolved"],
+        ["dismissed", "Dismissed"]
+      ];
+    },
+
+    _menuMarkup({ inputId, statusId, label, value, options, compact }) {
+      const current = options.find(([v]) => v === value) || options[0];
+      const currentValue = current[0];
+      const currentLabel = current[1];
+      const menuId = inputId ? `rm-menu-${inputId}` : `rm-menu-status-${statusId}`;
+      const listId = `${menuId}-list`;
+      const inputAttrs = inputId
+        ? `id="${inputId}"`
+        : `data-status-id="${statusId}"`;
+      const optionsHtml = options.map(([v, text]) => {
+        const active = v === currentValue;
+        return `<button type="button" class="rm-menu-option${active ? " rm-menu-option-active" : ""}" role="option" data-menu-owner="${menuId}" data-value="${v}" aria-selected="${active ? "true" : "false"}">${text}</button>`;
+      }).join("");
+      return `<div class="rm-menu${compact ? " rm-menu-compact" : ""}" id="${menuId}">` +
+        `<input type="hidden" ${inputAttrs} value="${currentValue}">` +
+        `<button type="button" class="rm-menu-btn" aria-haspopup="listbox" aria-controls="${listId}" aria-expanded="false" title="${this._esc(label)}" aria-label="${this._esc(label)}">` +
+          `<span class="rm-menu-label">${currentLabel}</span>` +
+          `<svg class="rm-menu-chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>` +
+        `</button>` +
+        `<div class="rm-menu-list${compact ? " rm-menu-list-compact" : ""}" id="${listId}" role="listbox" data-menu-owner="${menuId}" aria-label="${this._esc(label)}">${optionsHtml}</div>` +
+      `</div>`;
+    },
+
+    _menuForElement(element) {
+      if (!element) return null;
+      const nestedMenu = element.closest?.(".rm-menu");
+      if (nestedMenu) return nestedMenu;
+      const ownerId = element.closest?.("[data-menu-owner]")?.dataset.menuOwner;
+      return ownerId ? document.getElementById(ownerId) : null;
+    },
+
+    _menuList(menu) {
+      if (!menu) return null;
+      return menu.querySelector(".rm-menu-list") ||
+        document.getElementById(`${menu.id}-list`);
+    },
+
+    _selectMenuOption(option) {
+      const menu = this._menuForElement(option);
+      if (!menu || !this.root?.contains(menu)) return;
+      const value = option.dataset.value;
+      const statusInput = menu.querySelector("[data-status-id]");
+      const statusId = statusInput?.dataset.statusId;
+      this._setMenuValue(menu, value);
+      if (!statusId) return;
+      const id = parseInt(statusId, 10);
+      if (Number.isNaN(id)) return;
+      this._changeStatus(id, value);
+      this.root.querySelector(`[data-status-id="${statusId}"]`)
+        ?.closest(".rm-menu")
+        ?.querySelector(".rm-menu-btn")
+        ?.focus();
+    },
+
+    _setMenuValue(inputOrMenu, value, restoreFocus = true) {
+      if (!inputOrMenu) return;
+      const menu = inputOrMenu.classList?.contains("rm-menu")
+        ? inputOrMenu
+        : inputOrMenu.closest?.(".rm-menu");
+      const input = menu
+        ? menu.querySelector('input[type="hidden"]')
+        : inputOrMenu;
+      if (!input) return;
+      const resolvedMenu = menu || input.closest(".rm-menu");
+      input.value = value;
+      if (!resolvedMenu) return;
+      const list = this._menuList(resolvedMenu);
+      const option = list?.querySelector(`.rm-menu-option[data-value="${value}"]`);
+      const label = resolvedMenu.querySelector(".rm-menu-label");
+      if (label && option) label.textContent = option.textContent;
+      list?.querySelectorAll(".rm-menu-option").forEach(opt => {
+        const active = opt.dataset.value === value;
+        opt.classList.toggle("rm-menu-option-active", active);
+        opt.setAttribute("aria-selected", active ? "true" : "false");
+      });
+      this._closeMenu(resolvedMenu, restoreFocus);
+    },
+
+    _toggleMenu(menu) {
+      const open = this._menuList(menu)?.classList.contains("rm-menu-open");
+      this._closeAllMenus();
+      if (!open) this._openMenu(menu);
+    },
+
+    _openMenu(menu) {
+      const list = this._menuList(menu);
+      const btn = menu.querySelector(".rm-menu-btn");
+      if (!list || !btn) return;
+      this._closeAllMenus();
+      const rect = btn.getBoundingClientRect();
+      const gap = 4;
+      const viewportPadding = 8;
+      const compactWidth = menu.classList.contains("rm-menu-compact") ? 120 : 0;
+      const minimumWidth = Math.max(rect.width || 0, compactWidth);
+
+      list._rmMenuPortalOrigin = {
+        parent: list.parentNode,
+        nextSibling: list.nextSibling
+      };
+      this.root.appendChild(list);
+      list.style.pointerEvents = "auto";
+      list.style.position = "fixed";
+      list.style.top = "0px";
+      list.style.bottom = "";
+      list.style.left = "0px";
+      list.style.right = "auto";
+      list.style.minWidth = `${minimumWidth}px`;
+      list.classList.add("rm-menu-open");
+      btn.setAttribute("aria-expanded", "true");
+
+      const menuWidth = Math.max(list.offsetWidth || 0, rect.width || 0, compactWidth);
+      const menuHeight = list.offsetHeight || 0;
+      const spaceBelow = window.innerHeight - rect.bottom - viewportPadding;
+      const spaceAbove = rect.top - viewportPadding;
+      const openUp = menuHeight > spaceBelow && spaceAbove > spaceBelow;
+      const preferredLeft = compactWidth ? rect.right - menuWidth : rect.left;
+      const maxLeft = Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding);
+      const left = Math.min(Math.max(viewportPadding, preferredLeft), maxLeft);
+
+      list.style.position = "fixed";
+      list.style.top = openUp ? "" : `${rect.bottom + gap}px`;
+      list.style.bottom = openUp ? `${window.innerHeight - rect.top + gap}px` : "";
+      list.style.left = `${left}px`;
+      list.style.right = "auto";
+      list.style.minWidth = `${minimumWidth}px`;
+      const availableHeight = Math.max(0, (openUp ? spaceAbove : spaceBelow) - gap);
+      list.style.maxHeight = availableHeight ? `${availableHeight}px` : "";
+      list.style.overflowY = menuHeight > availableHeight && availableHeight > 0 ? "auto" : "";
+
+      const selected = list.querySelector('.rm-menu-option[aria-selected="true"]') ||
+        list.querySelector(".rm-menu-option");
+      selected?.focus();
+    },
+
+    _closeMenu(menu, restoreFocus = false) {
+      const list = this._menuList(menu);
+      const btn = menu.querySelector(".rm-menu-btn");
+      if (list) {
+        list.classList.remove("rm-menu-open");
+        ["position", "top", "bottom", "left", "right", "minWidth", "maxHeight", "overflowY", "pointerEvents"]
+          .forEach(property => { list.style[property] = ""; });
+        const origin = list._rmMenuPortalOrigin;
+        if (origin?.parent) {
+          if (origin.nextSibling?.parentNode === origin.parent) {
+            origin.parent.insertBefore(list, origin.nextSibling);
+          } else {
+            origin.parent.appendChild(list);
+          }
+        }
+        delete list._rmMenuPortalOrigin;
+      }
+      if (btn) btn.setAttribute("aria-expanded", "false");
+      if (restoreFocus) btn?.focus();
+    },
+
+    _closeAllMenus() {
+      if (!this.root) return;
+      this.root.querySelectorAll(".rm-menu").forEach(menu => this._closeMenu(menu));
+    },
+
     _showPopup(x, y) {
       const popup = document.getElementById("rm-popup");
       // Clean up previous drawing elements
@@ -638,10 +928,11 @@
         : this._currentElement.nearbyText.slice(0, 60);
       const input = document.getElementById("rm-popup-input");
       input.value = "";
-      document.getElementById("rm-intent-select").value = "change";
-      document.getElementById("rm-severity-select").value = "suggestion";
+      this._setMenuValue(document.getElementById("rm-intent-select"), "change", false);
+      this._setMenuValue(document.getElementById("rm-severity-select"), "suggestion", false);
       document.getElementById("rm-char-count").textContent = "";
       document.getElementById("rm-submit-label").textContent = "Add";
+      this._closeAllMenus();
 
       // Show screenshot preview with drawing tools
       if (this._currentScreenshot) {
@@ -652,6 +943,7 @@
     },
 
     _closePopup() {
+      this._closeAllMenus();
       const popup = document.getElementById("rm-popup");
       popup.style.transition = "opacity 0.15s ease";
       popup.style.opacity = "0";
@@ -806,12 +1098,13 @@
           <span class="rm-card-badge" style="background:${ic.bg};color:${ic.text}">${annotation.intent}</span>
           ${annotation.severity !== "suggestion" ? '<span class="rm-card-badge" style="background:#fff7ed;color:#9a3412">' + annotation.severity + '</span>' : ''}
           <span style="margin-left:auto;display:flex;gap:2px;align-items:center;">
-            <select data-status-id="${annotation.id}" title="Change status" style="font-size:10px;padding:2px 4px;border:1px solid #e5e7eb;border-radius:4px;background:#fff;color:#6b7280;cursor:pointer;appearance:auto;">
-              <option value="pending"${annotation.status === "pending" ? " selected" : ""}>Pending</option>
-              <option value="acknowledged"${annotation.status === "acknowledged" ? " selected" : ""}>Acknowledged</option>
-              <option value="resolved"${annotation.status === "resolved" ? " selected" : ""}>Resolved</option>
-              <option value="dismissed"${annotation.status === "dismissed" ? " selected" : ""}>Dismissed</option>
-            </select>
+            ${this._menuMarkup({
+              statusId: annotation.id,
+              label: "Change status",
+              value: annotation.status,
+              options: this._statusOptions(),
+              compact: true
+            })}
             <button data-edit-id="${annotation.id}" title="Edit" style="padding:2px 4px;background:none;border:none;cursor:pointer;color:#d1d5db;border-radius:4px;display:flex;align-items:center;" onmouseover="this.style.color='#6b7280'" onmouseout="this.style.color='#d1d5db'">
               <svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M17 3a2.85 2.85 0 114 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
             </button>
@@ -832,6 +1125,7 @@
     _rebuildList() {
       const list = document.getElementById("rm-panel-list");
       if (!list) return;
+      this._closeAllMenus();
       list.innerHTML = "";
       this._renderStorageError(list);
       this._renderFailedSync(list);
@@ -886,10 +1180,11 @@
         ? '"' + annotation.selectedText.slice(0, 60) + '"'
         : (annotation.element?.nearbyText || "").slice(0, 60);
       document.getElementById("rm-popup-input").value = annotation.comment;
-      document.getElementById("rm-intent-select").value = annotation.intent;
-      document.getElementById("rm-severity-select").value = annotation.severity;
+      this._setMenuValue(document.getElementById("rm-intent-select"), annotation.intent, false);
+      this._setMenuValue(document.getElementById("rm-severity-select"), annotation.severity, false);
       document.getElementById("rm-submit-label").textContent = "Save";
       this._updateCharCount();
+      this._closeAllMenus();
 
       // Clean up previous drawing elements
       const popup = document.getElementById("rm-popup");

data/lib/rails_markup/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsMarkup
-  VERSION = "1.4.2"
+  VERSION = "1.4.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails-markup
 version: !ruby/object:Gem::Version
-  version: 1.4.2
+  version: 1.4.3
 platform: ruby
 authors:
 - InventList