Skip to content

Commit 6c45f6e

Browse files
authored
Fix for overflow scrolling issue (#2275)
1 parent 5359dcb commit 6c45f6e

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

.changeset/smart-memes-argue.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@cloudfour/patterns': patch
3+
---
4+
5+
Prevent visually-hidden language labels from breaking width of overflowing code blocks

src/base/_defaults.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,9 @@ audio {
135135
* Code blocks
136136
*
137137
* 1. Don't allow code blocks to overflow willy-nilly.
138-
* 2. Set a shallower tab size to encourage accessible code samples without
138+
* 2. Prevent absolute-positioned children (such as visually-hidden language
139+
* labels) from breaking horizontal scroll in Chrome.
140+
* 3. Set a shallower tab size to encourage accessible code samples without
139141
* compromising horizontal real estate.
140142
*/
141143

@@ -145,7 +147,8 @@ pre {
145147
color: color.$text-light;
146148
overflow: auto; /* 1 */
147149
padding: ms.step(1);
148-
tab-size: 2; /* 2 */
150+
position: relative; /* 2 */
151+
tab-size: 2; /* 3 */
149152
}
150153

151154
/**

0 commit comments

Comments
 (0)