From 8eaac875d9651a607649f2ffc980fec23830ed8e Mon Sep 17 00:00:00 2001 From: Nico Alba Date: Thu, 11 Jun 2026 20:40:13 +0000 Subject: [PATCH] Wrap code on mobile to prevent horizontal page overflow, bump to 0.15.1 On narrow screens the base `code` rule's white-space: pre lets long inline commands and code-block lines push the page past the viewport. Override it to pre-wrap inside @media (max-width: 996px) so code wraps on mobile while desktop rendering is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/docusaurus-theme/css/legacy.css | 10 ++++++---- packages/docusaurus-theme/package.json | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/docusaurus-theme/css/legacy.css b/packages/docusaurus-theme/css/legacy.css index a404b36..24353cb 100644 --- a/packages/docusaurus-theme/css/legacy.css +++ b/packages/docusaurus-theme/css/legacy.css @@ -1989,10 +1989,12 @@ code { white-space: pre; } -/* Inline code must wrap; the rule above forces white-space: pre, which overflows the page on mobile. */ -:not(pre) > code { - white-space: normal; - overflow-wrap: anywhere; +/* On mobile, let code wrap instead of overflowing the viewport. Overrides the + white-space: pre set above; pre-wrap keeps formatting but wraps long lines. */ +@media (max-width: 767px) { + code { + white-space: pre-wrap; + } } code p { diff --git a/packages/docusaurus-theme/package.json b/packages/docusaurus-theme/package.json index 1f702bf..0387366 100644 --- a/packages/docusaurus-theme/package.json +++ b/packages/docusaurus-theme/package.json @@ -1,6 +1,6 @@ { "name": "@netfoundry/docusaurus-theme", - "version": "0.15.0", + "version": "0.15.1", "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling", "main": "dist/src/index.js", "types": "dist/src/index.d.ts",