docs: constrain the forms guide video embed on mobile - #2467
Conversation
The video embed markup carried over from the Docusaurus site used JSX `className`, which browsers ignore, and docs-analog had no matching styles. The iframe fell back to its literal width="560", overflowing narrow viewports. Switch to `class` in all four locales and add responsive video styles so the embed fills the content width up to 750px at a 16:9 ratio.
✅ Deploy Preview for analog-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for analog-blog ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for analog-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThe forms guides now use standard HTML attributes for video embeds. Each iframe includes a descriptive title and fullscreen support. The English, Spanish, Portuguese, and Chinese guides retain their existing video sources and dimensions. The documentation stylesheet adds centered video containers, a 750px maximum width, 16:9 aspect-ratio wrappers, and full-size rounded iframes. Estimated code review effort: 1 (Trivial) | ~5 minutes 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit dbd04bf
💡 Dealing with memory or CPU issues? See memory and CPU details with the resource usage add-on ↗. ☁️ Nx Cloud last updated this comment at |
2 participants
PR Checklist
The video embed on /docs/guides/forms overflows the viewport on mobile. Two causes, both leftovers from the Docusaurus → Analog docs migration (#2453):
className="video-container", which browsers ignore as an unknown attribute — no class is ever applied.apps/docs-analog/src/styles.csshas no.video-container/.video-responsive-wrapperrules. Those only exist in the legacyapps/docs-app/src/css/custom.css.With no class and no styles, the iframe falls back to its literal
width="560"and overflows narrow viewports.No linked issue — reported directly.
Affected scope
docs-analog(docs site, no npm package affected)Recommended merge strategy for maintainer [optional]
What is the new behavior?
className→classinguides/forms.mdacross all four locales (en, es, pt-br, zh-hans).docs-analog/src/styles.css, usingaspect-ratio: 16 / 9rather than porting the oldpadding-bottomhack.titleandallowfullscreento the iframe (separate commit).scrollWidth584 → horizontal overflowscrollWidth390 → no overflowNote: the embed URL carries
controls=0, so YouTube hides its player chrome including the fullscreen button.allowfullscreenenables fullscreen via thefshortcut and double-click, but there is no visible button to tap. Droppingcontrols=0would be a follow-up content decision, left as-is here.Test plan
nx format:checkpnpm buildpnpm testBuild and test were not run — this change is CSS and markdown content only, with no TypeScript touched.
Manual verification against
nx serve docs-analog, measured with Playwright at a 390×844 viewport. All four locale routes return 200, render the localizedtitle, resolveiframe.allowFullscreentotrue, and lay out at 342px with no horizontal overflow.Does this PR introduce a breaking change?
Other information
The legacy
apps/docs-apphas no copy of this embed, so the change is confined todocs-analog, which is what serves analogjs.org perzerops.yaml.🤖 Generated with Claude Code
https://claude.ai/code/session_01FyexV8dwYXFW8fPLBX1kZx
Generated by Claude Code