Non-Modal Dialogs are rendered with Buttons to the left (instead to the right)

[mrh1997]

According to the docs one can create Dialogs-like-looking-Elements without the Popup-semantics by omitting the <dialog> tag and only use <article>:

  <article>
    ...
    <footer>
      <button className="secondary">Cancel</button>
      <button>OK</button>
    </footer>
  </article>

Current Behavior

Unfortunaltely the Buttons are rendered to the left side in this case. When embracing the article by a dialog the buttons are rendered to the right.

Expected Behavior

I expect <article> without an enclosing <dialog> renders the same way (i.e. the buttons to the right)

I think the problem is this line as it is part of a selector dialog > article > footer instead of simply article > footer.

Maybe the whole footer section should be moved out of the dialog selector?!?

Reproduction URL

https://jsfiddle.net/owgcpb4j

Environment

Windows 11, Firefox, PicoCSS latest (v2)

[rokf]

One hack that you can use is that you put a nav in the footer and put the buttons in a div or ul. You can then use an empty div as the first child of nav, which will move the buttons (second child) to the right.

[mrh1997]

My intention was not to find a hack (I implemented already a workaround via CSS), but to fix the issue.

I would even provide a pull request if s.b. conforms that my solution will not break something else...

[lucaslarroche]

Aligning right for dialogue > article > footer is already very opinionated. Aligning right for article > footer might be too much.

I would love to hear other user's thoughts.