Fix: Bloblang playground title hidden behind sticky bar on mobile

[JakeSCahill]

Problem

On mobile (≤1024px), the Bloblang playground page title ("Bloblang Playground") is invisible — hidden behind the sticky product indicator (.component-indicator-sticky), which has z-index: 50 and an opaque background and overlaps the same vertical band as the h1.page title.

The title element itself renders fine (white, visibility: visible, z-index: 1) — it's just painted over by the higher-z, opaque sticky bar.

Fix

Keep the product indicator in normal flow (position: static) on the playground at ≤1024px, so the title sits cleanly below it. Scoped to .bloblang-playground, so it only affects this app-like page — losing sticky-on-scroll for the indicator there is a fine tradeoff.

Scope

Pre-existing bug, unrelated to the Ask AI work — one scoped CSS rule in bloblang-playground.css. Verified on a 390px viewport: title now visible below the indicator, no overlap (sticky 210–262, title 274–303).

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	d3c1a23
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a4cfa8d92e6f20008af08e4
😎 Deploy Preview	https://deploy-preview-396--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 30 (no change from production) Accessibility: 89 (no change from production) Best Practices: 92 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 899a54bd-d454-45d5-8ed7-18f9b0bea1ad

📥 Commits

Reviewing files that changed from the base of the PR and between 42657e2 and d3c1a23.

📒 Files selected for processing (1)

• src/css/bloblang-playground.css

---

📝 Walkthrough

Walkthrough

This change adds a CSS override in the Bloblang playground stylesheet that switches the sticky component indicator's positioning to static on mobile viewports, preventing it from overlapping the page title on narrow screens.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Changes

File	Change Summary
src/css/bloblang-playground.css	Added a CSS rule overriding .component-indicator-sticky to position: static to prevent overlap with page title on narrow screens.

Related issues: None mentioned in provided context.

Related PRs: None mentioned in provided context.

Suggested labels: css, bugfix, mobile

Suggested reviewers: None specified in provided context.

🐰 A sticky note once hid the title from view,
So we pinned it down, static and true.
No more overlap on screens so thin,
The page title shines, let the reading begin!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the mobile sticky-bar overlap fix on the Bloblang playground.
Description check	✅ Passed	The description matches the scoped CSS fix for the mobile title overlap issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/playground-mobile-title

Warning

Tools execution failed with the following error:

Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}