Hello!
As you can see in the image, the notification bar is quite tall. But I can’t seem to make it any smaller.
The infobar.css file in the Firefox source code contains the following code:
:host(.infobar) {
.container {
/* Don't let lwthemes set a text-shadow. */
text-shadow: none;
padding-block: 3px;
align-items: center;
}
.text-container {
padding-block: calc(1lh - var(--icon-size) / 2);
}
.content {
gap: 0 12px;
height: fit-content;
}
.close {
margin-block: 4px;
margin-inline-start: 8px;
align-self: flex-start;
}
}
Despite this, I can’t seem to reduce the paddings/margins to lower the height of this bar (regardless of its content: pop-up notification, DRM notification, etc.).
I’d also like to remove the icon (the “i” inside a circle, before the text “Firefox prevented…”).
You can try out this type of bar by visiting this website, for example.
Thank you very much in advance for any help you can provide!

Make sure your selectors have higher priority
For example:
:host(.infobar) { .container { padding-block: 0 !important; } }does nothing. Deleting
:host(.infobar) {would work, but obviously that would impact all the containers and is not desirable.