fix(code-block): mobile horizontal scroll and line spacing [INTORG-767]

Author: JonathanMatthey

cms/src/components/blocks/code-block.json

@@ -10,6 +10,7 @@
     "code": {
       "type": "text",
       "required": true,
+      "description": "4-space indentation is normalized to 2 spaces.",
       "pluginOptions": {
         "i18n": {
           "localized": true

src/components/blocks/CodeBlock.astro

@@ -19,26 +19,22 @@ const highlighted = await codeToHtml(code, {
 ---
 
 <figure
-  class="my-0 rounded-lg overflow-hidden border border-neutral-25 text-step--1"
+  class="my-0 w-full min-w-0 rounded-lg border border-neutral-25 text-step--1"
   data-component="code-block"
 >
-  {/* Title bar */}
   <div
-    class="flex items-center gap-space-xs px-space-s py-space-2xs bg-[#f6f8fa] border-b border-neutral-25"
+    class="flex items-center gap-space-xs px-space-s py-space-2xs bg-[#f6f8fa] border-b border-neutral-25 rounded-t-lg"
   >
-    {/* Decorative window dots */}
     <div class="flex items-center gap-[6px] shrink-0" aria-hidden="true">
       <span class="block h-3 w-3 rounded-full bg-[#ff5f57]"></span>
       <span class="block h-3 w-3 rounded-full bg-[#febc2e]"></span>
       <span class="block h-3 w-3 rounded-full bg-[#28c840]"></span>
     </div>
 
-    {/* Filename / title */}
-    <span class="flex-1 text-neutral-900 text-step--2 truncate">
+    <span class="flex-1 min-w-0 truncate text-neutral-900 text-step--2">
       {title ?? language}
     </span>
 
-    {/* Copy button */}
     <button
       type="button"
       class="copy-btn shrink-0 inline-flex items-center gap-[5px] cursor-pointer
@@ -75,19 +71,61 @@ const highlighted = await codeToHtml(code, {
     </button>
   </div>
 
-  {/* Highlighted code */}
   <div
-    class="overflow-x-auto
-           [&_pre]:m-0 [&_pre]:p-space-s [&_pre]:leading-relaxed [&_pre]:bg-white!
-           [&_code]:font-mono [&_code]:text-step--1
-           [&_.line]:min-h-[1.5em]"
+    class="code-block-scroll rounded-b-lg"
+    data-lenis-prevent-touch
     set:html={highlighted}
   />
 </figure>
 
+<style>
+  /* Shiki: block .line + newline nodes between spans; contain:inline-size for mobile scroll. */
+  [data-component='code-block'] {
+    contain: inline-size;
+  }
+
+  [data-component='code-block'] .code-block-scroll {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-x pan-y;
+    line-height: 1.5;
+  }
+
+  [data-component='code-block'] .code-block-scroll :global(pre) {
+    display: block;
+    width: max-content;
+    min-width: 100%;
+    margin: 0;
+    padding: var(--spacing-space-s);
+    background-color: #fff !important;
+    white-space: normal;
+  }
+
+  [data-component='code-block'] .code-block-scroll :global(code),
+  [data-component='code-block'] .code-block-scroll :global(.line) {
+    display: block;
+    width: max-content;
+    min-width: 100%;
+    font-family: ui-monospace, monospace;
+    font-size: var(--text-step--1);
+    line-height: inherit;
+  }
+
+  [data-component='code-block'] .code-block-scroll :global(.line) {
+    white-space: pre;
+  }
+</style>
+
 <script>
   document.addEventListener('click', (e) => {
-    const btn = (e.target as Element)?.closest<HTMLButtonElement>('.copy-btn')
+    const btn = (e.target as Element)?.closest<HTMLButtonElement>(
+      '[data-component="code-block"] .copy-btn'
+    )
     if (!btn) return
 
     const code = btn.dataset.code ?? ''

src/components/blocks/DynamicZone.astro

@@ -65,11 +65,5 @@ const resolvedBlocks = blocks
 ---
 
 <div class="flex flex-col gap-space-xl">
-  {
-    resolvedBlocks.map(({ Component, props }) => (
-      <div class="w-full">
-        <Component {...props} />
-      </div>
-    ))
-  }
+  {resolvedBlocks.map(({ Component, props }) => <Component {...props} />)}
 </div>

src/layouts/BlogPostLayout.astro

@@ -70,7 +70,7 @@ const breadcrumbs = [
         data-prose-blog
         itemscope
         itemtype="http://schema.org/Article"
-        class="mb-5xl tablet:mb-4xl desktop:mb-5xl"
+        class="mb-5xl min-w-0 tablet:mb-4xl desktop:mb-5xl"
       >
         <BlogPostHeader frontmatter={frontmatter} />
         <slot />