fix: slight reduction of live.js

lib/bds/desktop/shell_live/index.html.heex

@@ -13,19 +13,53 @@
     >
       <div class="window-titlebar-menu-bar" data-testid="window-titlebar-menu-bar">
         <%= for group <- @menu_groups do %>
-          <button
+          <div class="window-titlebar-menu-group">
-            class={[
+            <button
-              "window-titlebar-menu-button",
+              class={[
-              if(@titlebar_menu_group == Atom.to_string(group.id), do: "is-active")
+                "window-titlebar-menu-button",
-            ]}
+                if(@titlebar_menu_group == Atom.to_string(group.id), do: "is-active")
-            data-testid="window-titlebar-menu-button"
+              ]}
-            data-menu-group={group.id}
+              data-testid="window-titlebar-menu-button"
-            type="button"
+              data-menu-group={group.id}
-            phx-click="toggle_titlebar_menu"
+              type="button"
-            phx-mouseenter="hover_titlebar_menu"
+              phx-click="toggle_titlebar_menu"
-            phx-value-group={group.id}
+              phx-mouseenter="hover_titlebar_menu"
-            aria-label={group.label}
+              phx-value-group={group.id}
-          ><%= group.label %></button>
+              aria-label={group.label}
+            ><%= group.label %></button>
+
+            <%= if @titlebar_menu_group == Atom.to_string(group.id) do %>
+              <div
+                class="window-titlebar-menu-dropdown"
+                data-testid="window-titlebar-menu-dropdown"
+                phx-click-away="close_titlebar_menu"
+              >
+                <%= for item <- titlebar_menu_dropdown_items(group) do %>
+                  <%= if item.separator do %>
+                    <div class="window-titlebar-menu-separator"></div>
+                  <% else %>
+                    <button
+                      class={[
+                        "window-titlebar-menu-item",
+                        if(@titlebar_menu_item_index == item.keyboard_index, do: "is-keyboard-active")
+                      ]}
+                      data-testid="window-titlebar-menu-item"
+                      data-menu-action={item.id}
+                      type="button"
+                      phx-click="titlebar_menu_action"
+                      phx-value-action={item.id}
+                      aria-label={item.label}
+                    >
+                      <span class="window-titlebar-menu-item-label"><%= item.label %></span>
+                      <%= if item.shortcut do %>
+                        <span class="window-titlebar-menu-item-accelerator"><%= item.shortcut %></span>
+                      <% end %>
+                    </button>
+                  <% end %>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
         <% end %>
       </div>
       <div class="window-titlebar-drag-region"></div>
@@ -68,37 +102,6 @@
           </span>
         </button>
       </div>
-      <%= if group = active_titlebar_menu_group(assigns) do %>
-        <div
-          class="window-titlebar-menu-dropdown"
-          data-testid="window-titlebar-menu-dropdown"
-          phx-click-away="close_titlebar_menu"
-        >
-          <%= for item <- titlebar_menu_dropdown_items(group) do %>
-            <%= if item.separator do %>
-              <div class="window-titlebar-menu-separator"></div>
-            <% else %>
-              <button
-                class={[
-                  "window-titlebar-menu-item",
-                  if(@titlebar_menu_item_index == item.keyboard_index, do: "is-keyboard-active")
-                ]}
-                data-testid="window-titlebar-menu-item"
-                data-menu-action={item.id}
-                type="button"
-                phx-click="titlebar_menu_action"
-                phx-value-action={item.id}
-                aria-label={item.label}
-              >
-                <span class="window-titlebar-menu-item-label"><%= item.label %></span>
-                <%= if item.shortcut do %>
-                  <span class="window-titlebar-menu-item-accelerator"><%= item.shortcut %></span>
-                <% end %>
-              </button>
-            <% end %>
-          <% end %>
-        </div>
-      <% end %>
     </div>
   <% end %>
 

priv/ui/app.css

@@ -121,6 +121,13 @@ button {
   z-index: 2;
 }
 
+.window-titlebar-menu-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
 .window-titlebar-menu-bar.is-hidden {
   display: none;
 }
@@ -161,7 +168,7 @@ button {
 .window-titlebar-menu-dropdown {
   position: absolute;
   top: 30px;
-  left: var(--bds-titlebar-menu-left, 6px);
+  left: 0;
   min-width: 210px;
   padding: 6px;
   display: flex;

priv/ui/live.js

@@ -129,28 +129,6 @@ document.addEventListener("DOMContentLoaded", () => {
         this.syncStoredUiLanguage();
         this.destroyOverlaySync = syncTitlebarOverlayInsets();
 
-        this.syncTitlebarMenuAnchor = () => {
-          const titlebar = this.el.querySelector("[data-testid='window-titlebar']");
-          const dropdown = this.el.querySelector("[data-testid='window-titlebar-menu-dropdown']");
-          const openGroup = titlebar?.dataset.openMenuGroup;
-
-          if (!dropdown || !titlebar || !openGroup) {
-            return;
-          }
-
-          const button = this.getTitlebarMenuButtons().find((candidate) => candidate.dataset.menuGroup === openGroup);
-
-          if (!button) {
-            return;
-          }
-
-          const titlebarRect = titlebar.getBoundingClientRect();
-          const buttonRect = button.getBoundingClientRect();
-          const left = Math.max(6, Math.round(buttonRect.left - titlebarRect.left));
-
-          dropdown.style.setProperty("--bds-titlebar-menu-left", `${left}px`);
-        };
-
         this.handleMouseDown = (event) => {
           const handle = event.target.closest("[data-role='resize-handle']");
 
@@ -241,11 +219,6 @@ document.addEventListener("DOMContentLoaded", () => {
         window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.addEventListener("keydown", this.handleShortcutKeyDown, true);
         this.el.addEventListener("change", this.handleChange);
-        this.syncTitlebarMenuAnchor();
-      },
-
-      updated() {
-        this.syncTitlebarMenuAnchor();
       },
 
       destroyed() {

test/bds/ui/shell_test.exs

@@ -170,11 +170,14 @@ defmodule BDS.UI.ShellTest do
     live_ex = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live.ex")
     template = File.read!("/Users/gb/Projects/bDS2/lib/bds/desktop/shell_live/index.html.heex")
 
-    assert css =~ "left: var(--bds-titlebar-menu-left, 6px);"
+    assert css =~ ".window-titlebar-menu-group {"
-    assert live_js =~ "--bds-titlebar-menu-left"
+    assert css =~ "left: 0;"
+    refute live_js =~ "--bds-titlebar-menu-left"
+    refute live_js =~ "syncTitlebarMenuAnchor"
     refute live_js =~ "handleTitlebarMenuKeyDown"
     refute live_js =~ "keyboardMenuIndex"
     assert template =~ "phx-window-keydown={if(@titlebar_menu_group, do: \"titlebar_menu_keydown\")}"
+    assert template =~ "window-titlebar-menu-group"
     assert live_ex =~ ~s(def handle_event("titlebar_menu_keydown")
     assert live_ex =~ "titlebar_menu_item_index"
   end