Skip to content

bug: raw <iframe> embeds overflow the page on mobile #53

Open

Description

@ephbaum

Describe the bug

A post containing a raw <iframe> scrolls sideways on a phone. Tailwind's typography prose styles don't constrain iframe to max-width: 100%, so a hard-coded width="560" stays 560px wide no matter how narrow the viewport is.

Only one post is affected today — the YouTube embed at src/content/blog/2025/10/2025-10-10-using-llms-to-audit-and-clean-up-your-codebase-a-real-world-example.md:40:

<iframe width="560" height="315" src="https://www.youtube.com/embed/..." ...></iframe>

Unlike the sibling issue about the 320px listing, this one hits ordinary phone widths, not just the narrowest ones.

Steps to Reproduce

pnpm run build && pnpm run preview

Open /blog/using-llms-to-audit-and-clean-up-your-codebase-a-real-world-example/ and compare document.documentElement.scrollWidth against clientWidth:

Viewport Page overflow Widest element
320px 264px IFRAME, 560px
375px 209px IFRAME, 560px

Expected behavior

Embedded media shrinks to the available width and keeps its aspect ratio. No horizontal page scroll at any phone width.

Additional context

Found during an adversarial review of #51 and confirmed pre-existing — it is not caused by that PR. Worth noting against #51's claim of stopping sideways scroll on posts: that PR fixed the article container (which was a fixed w-sm, 24rem, wider than a 375px viewport), but the container was never the constraint here. The iframe overflowed the old narrower container by an even larger margin.

Two ways to fix, and they're not exclusive:

  1. Global, catches future embeds — constrain embedded media in the prose styles, e.g. iframe, video, embed, object { max-width: 100%; }, ideally with an aspect-ratio wrapper so the height scales too rather than leaving letterboxing.
  2. Per-post — drop the hard-coded width/height attributes on that one embed.

(1) is the one that stops this recurring, since the content is Markdown with raw HTML and nothing currently prevents the next embed from doing the same thing. Worth checking whether any other raw-HTML media (<video>, <img> with fixed width) is lurking in the content while fixing — a grep for <iframe currently matches only this one post.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions