diff --git a/.changeset/smart-memes-argue.md b/.changeset/smart-memes-argue.md new file mode 100644 index 000000000..269c6c474 --- /dev/null +++ b/.changeset/smart-memes-argue.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': patch +--- + +Prevent visually-hidden language labels from breaking width of overflowing code blocks diff --git a/src/base/_defaults.scss b/src/base/_defaults.scss index fb4f33887..e0ff05a4d 100644 --- a/src/base/_defaults.scss +++ b/src/base/_defaults.scss @@ -135,7 +135,9 @@ audio { * Code blocks * * 1. Don't allow code blocks to overflow willy-nilly. - * 2. Set a shallower tab size to encourage accessible code samples without + * 2. Prevent absolute-positioned children (such as visually-hidden language + * labels) from breaking horizontal scroll in Chrome. + * 3. Set a shallower tab size to encourage accessible code samples without * compromising horizontal real estate. */ @@ -145,7 +147,8 @@ pre { color: color.$text-light; overflow: auto; /* 1 */ padding: ms.step(1); - tab-size: 2; /* 2 */ + position: relative; /* 2 */ + tab-size: 2; /* 3 */ } /**