From d3c1a2342d3ef5e26bf284965e67a0e9a3bd5703 Mon Sep 17 00:00:00 2001 From: JakeSCahill Date: Tue, 7 Jul 2026 14:09:13 +0100 Subject: [PATCH] Fix: Bloblang playground title hidden behind sticky bar on mobile On narrow screens the sticky product indicator (.component-indicator-sticky, z-index 50, opaque) overlapped and covered the h1 page title. Keep the indicator in normal flow on the playground at <=1024px so the title renders cleanly below it. Co-Authored-By: Claude Opus 4.8 --- src/css/bloblang-playground.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/css/bloblang-playground.css b/src/css/bloblang-playground.css index af92573b..849ed912 100644 --- a/src/css/bloblang-playground.css +++ b/src/css/bloblang-playground.css @@ -846,6 +846,13 @@ html[data-theme=dark] .bloblang-snippet .ace-editor { overflow: visible; } + /* The sticky product indicator (position: sticky, z-index: 50, opaque + background) otherwise overlaps and hides the page title on narrow screens. + Keep it in normal flow here so the title sits cleanly below it. */ + .bloblang-playground .component-indicator-sticky { + position: static; + } + /* Ensure page title is visible on mobile */ .bloblang-playground .doc h1.page { display: block !important;