Mini embed renders with an overflowing play button

[ebrelsford]

Mini embed renders with an overflowing play button

Issue found of: Dec 18 2024

Steps to reproduce:

Embed a track player with height = 20px to get the mini player.

I won't give the <iframe> code I'm using because this is a private track, but you can see the result is broken in the SoundCloud site itself:

Expected behaviour:

I would expect the play button not to overflow the height of the iframe. It appears to be off by 1px since adding a margin-top: -1px to .sc-media-left gets the result I would expect:

Actual behaviour:

As you can see in the first screenshot the button overflows by ~1px so it looks cut off. Unfortunately bumping the height of the iframe up by a pixel doesn't help because the mini player does not get served at 21px, so you get something like this:

[mgoodfellow]

This would be great to have fixed. It originally broke a year or so ago when the font was changed on SoundCloud and it seemed to cause this issue on the widget.

I think it should be margin-top: -2px on .sc-media-left:

-1px still has small overflow:

I note that the SoundCloud logo on the right hand side indeed has this -2px offset to make itself align correctly:

Seems like a super simple fix, any chance of getting this upstreamed? Thanks!

[mgoodfellow]

Hey @dpreussler sorry to tag you directly but do you know if this could be passed to the team who owns the component for a quick fix? Many thanks!

[dpreussler]

@mgoodfellow thanks for pinging, let me see what i can do

[afoxaudio]

As of today this is, astoundingly, still broken.

[dpreussler]

@afoxaudio
The recent focus for the web team was the new design of SoundCloud.com. It contained the long requested dark mode.
Therefore hope you can understand that the widget was not on high priority.
It is not forgotten though! 🙏