[Bug report] Warnings/Message boxes don't render correctly on the latest version of Firefox

[xplshn]

This is the only browser which I have installed in my PC. So I can't really compare to others, however, I don't think it is supposed to look like that:
Otherwise, really cool project! I will probably make a GTK themese based off of this

[zshall]

Thanks for your report! It appears that this is related to breakpoints in @media queries; in Firefox 122 on Windows it looks like this for me at 1920w:

I can reproduce the bug you described in WebKit, at a width of 1200-1400 pixels, so it's very likely related to this:

Let me take a look and see what I can find; it's probably going to regard padding on the icon on the left.

As far as GTK theming that sounds great! I envision a future version of this project where you can declare <div class="theme-default shell-gtk"> or shell-3.1 or shell-os9, etc. and we would adapt to it. We'll probably want to reorganize the folder structure to reflect this. I'll write up an issue about getting this done.

[zshall]

I've taken a look and implemented some fixes. Added a .btn-group class for dealing with multiple buttons next to each other which spaces them out using gap. I also updated the documentation to add .p-0 classes to the left hand side of alerts so that they work in constrained screen sizes; this also makes them look better positioned. Here's what it looks like on Firefox:

[xplshn]

Great! I will track this project.

[zshall]

Published! v1.1.0 is live now.

npm: https://www.npmjs.com/package/shell-css
Docs: https://zachhall.org/shell-css/

Feel free to comment this issue if you run into trouble with the fix.