Fixing Scrollable Social Embeds in Editor.js

It worked. Technically.

But then I noticed something annoying. The embedded post had its own scrollbar

Instead of naturally taking up the height it needed, the post was trapped inside a fixed container, so you had to scroll inside the embed just to read it. That's definitely not the experience I wanted (as someone who likes to do things cleanly 😏)

The problem

My first implementation treated the social post like a regular iframe.

It was something along these lines:

At first glance, it looked fine.

The problem was the fixed height.

The actual social post could be taller than the iframe, so the browser had no choice but to create an internal scrollbar.

That was the first clue for me: the content itself was not really the problem. The container was.

What I changed

For Twitter posts, I moved away from forcing the content into a fixed-height iframe and used the platform's embed markup instead.

This allowed the embed to render at the height it actually needed instead of being squeezed into a predefined box.

I also made sure the wrapper itself was not restricting the embed:

No fixed height. No unnecessary overflow-y: auto.

The small lesson here

The fix itself was simple.

The important part was finding where the problem actually was.

I could have kept increasing the iframe height, but that would only fix one post at a time.

Once I let the embed control its own height, everything became much cleaner.

Check it out...

Open post on X/Twitter

And yes, that tiny scrollbar annoyed me enough to write about it...😩