Embedded media audio has height of 0 in Olivero and cannot be seen

The patch working fine
Before patch

After Patch

RTBC

It would be good if we could get some more screenshots on other supported browsers https://www.drupal.org/docs/system-requirements/browser-requirements

The issue exists on the chrome browser, fixed after the patch.

I have checked it on safari, working fine before and after the patch.

I'm mostly concerned about removing the display: block declaration because the default value for the property for this element would be inline (at least based on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Styling_...). I'm also curious if the removal of the max-width declaration has impact on the designs. Wouldn't the correct fix here to remove the height: 0 from audio, but keep the display and max-width intact?

The audio is now displayed fine with the patch submitted in #9. Marking this issue as RTBC.

+++ b/core/themes/olivero/css/base/base.pcss.css
@@ -51,11 +51,13 @@ a {
 img,
...
 video {
+  height: auto;
+}
...
+audio {
   display: block;
   max-width: 100%;

img and video should also get display: block and max-width: 100%.

@lauriii Great catch!

@mherchel The latest patch looks good!

We should open follow-up to improve the audio styles. For example, I placed audio in the beginning of an article and there was no margin between the image and the audio controls.

Committed f8ad4f8 and pushed to 9.2.x. Also cherry-picked to 9.1.x. Thanks!