Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatic width calculation of ActionMenu inside Dialog is broken #2926

Open
HDinger opened this issue Jul 1, 2024 · 3 comments
Open

Automatic width calculation of ActionMenu inside Dialog is broken #2926

HDinger opened this issue Jul 1, 2024 · 3 comments

Comments

@HDinger
Copy link
Contributor

HDinger commented Jul 1, 2024

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
Bildschirmfoto 2024-07-01 um 08 59 29
  • This gets evn more bad, the larger the dialog itself is:
Bildschirmfoto 2024-07-01 um 09 03 14

Expected behavior

  • The automtic width calucation should also be working inside a dialog
Bildschirmfoto 2024-07-01 um 09 02 33
@jonrohan
Copy link
Member

jonrohan commented Jul 8, 2024

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. ❤

Copy link
Contributor

github-actions bot commented Jan 4, 2025

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.

@github-actions github-actions bot added the Stale Automatically marked as stale. label Jan 4, 2025
@HDinger
Copy link
Contributor Author

HDinger commented Jan 6, 2025

Please leave it open.

@github-actions github-actions bot removed the Stale Automatically marked as stale. label Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants