diff --git a/components/release-notes/PatchNotes.module.scss b/components/release-notes/PatchNotes.module.scss index a611ca538a..e5a30677aa 100644 --- a/components/release-notes/PatchNotes.module.scss +++ b/components/release-notes/PatchNotes.module.scss @@ -1,8 +1,5 @@ .sectionHeading { scroll-margin-top: 70px !important; - pre code { - white-space: pre-wrap; - } } .aside { diff --git a/components/ui/MarkdownContent/stylesheets/code.scss b/components/ui/MarkdownContent/stylesheets/code.scss index a6fe60f104..dd512d45de 100644 --- a/components/ui/MarkdownContent/stylesheets/code.scss +++ b/components/ui/MarkdownContent/stylesheets/code.scss @@ -5,13 +5,8 @@ border: 1px var(--color-border-default) solid; } - pre code { - white-space: pre-wrap; - } - [class~="height-constrained-code-block"] pre { max-height: 32rem; - overflow-y: auto; } [class~="code-example"] { diff --git a/src/rest/components/RestCodeSamples.module.scss b/src/rest/components/RestCodeSamples.module.scss index 4910c0bc04..b5b547ff55 100644 --- a/src/rest/components/RestCodeSamples.module.scss +++ b/src/rest/components/RestCodeSamples.module.scss @@ -1,7 +1,6 @@ @import "@primer/css/support/index.scss"; .codeBlock { - overflow-y: auto; margin-bottom: 1rem; line-height: 1.45; background-color: var(--color-canvas-subtle); @@ -11,7 +10,6 @@ background-color: transparent; padding: 8px 8px 16px; max-width: 90vw; - white-space: pre-wrap; @include breakpoint(lg) { max-width: 40vw; diff --git a/src/webhooks/components/WebhookPayloadExample.module.scss b/src/webhooks/components/WebhookPayloadExample.module.scss index 4984f4e753..fd7599c9be 100644 --- a/src/webhooks/components/WebhookPayloadExample.module.scss +++ b/src/webhooks/components/WebhookPayloadExample.module.scss @@ -1,7 +1,6 @@ @import "@primer/css/support/index.scss"; .payloadExample { - overflow-y: auto; margin-bottom: 1rem; line-height: 1.45; background-color: var(--color-canvas-subtle); @@ -11,6 +10,5 @@ code { background-color: transparent; padding: 8px 8px 16px; - white-space: pre-wrap; } } diff --git a/stylesheets/markdown-overrides.scss b/stylesheets/markdown-overrides.scss index 351c96be58..f3c29f1543 100644 --- a/stylesheets/markdown-overrides.scss +++ b/stylesheets/markdown-overrides.scss @@ -22,3 +22,18 @@ margin-top: 0 !important; } } + +// Horizontal scroll gets flagged as an accessibility violation. +// Updates all code examples to only allow vertical scroll, and +// break aggressively. +.markdown-body { + pre { + overflow-x: hidden; + overflow-y: auto; + } + + pre code { + white-space: pre-wrap; + overflow-wrap: break-word; + } +}