Automatic width calculation of `ActionMenu` inside `Dialog` is broken

[HDinger]

Steps to reproduce

• Create a Primer::Alpha::Dialog
• Inside the dialog create a Primer::Alpha::ActionMenu
• Open the dialog and open the menu inside it

    <%= render(Primer::Alpha::Dialog.new(title: "Test")) do |d|
      d.with_show_button { button_text }
      d.with_body do
        render(Primer::Alpha::ActionMenu.new(anchor_align: :end,
                                             select_variant: :single,
                                             )) do |menu|
          menu.with_show_button() do |button|
            button.with_trailing_action_icon(icon: "triangle-down")
            "Open me"
          end
          menu.with_item(label: "Item 1")
          menu.with_item(label: "Item 2")
          menu.with_item(label: "Item 3")

        end

      end
    end %>

Actual behavior

• The dropdown of the menu is way too large
• This happens because the dialog sets --overlay-width: _{{xy}}_ px;. And the ActionMenu uses the same variable for its own width calulation

• This gets evn more bad, the larger the dialog itself is:

Expected behavior

• The automtic width calucation should also be working inside a dialog

[jonrohan]

Ahh, nice catch. It seems like the top Dialog's CSS variable is overriding the Menu's variable? Pull request welcome if you spot a quick fix. ❤

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[HDinger]

Please leave it open.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[HDinger]

Please leave it open.