Docs: fix overflow:auto horizontal scrollbars covering last line of code blocks (twbs#37694)

patrickhlauke · mdo · web-flow · commit d5f4532b3eb0 · 2023-03-04T12:05:54.000-08:00
* Add dirty hack for Firefox

* Disable stylelint check for function-url-quotes

to make the hack go through unchallenged

* Make the fix across all browsers

It's not just Firefox - same issue can be seen (though slightly less horrible looking) on macOS / Chrome etc

* Tweak padding, move clipboard button down slightly

* Further CSS tweaks

Forcing `overflow: overlay` should normalise behaviour between Chrome/Win and other implementations. While visually the Chrome/Win scrollbar still looks big and ugly, its height/spacing is now taken into account as being part of the content, so styles can be applied consistently with extra padding at the bottom

* Linting fixes

* Linting fixes

* Apply suggestions from code review

---------

Co-authored-by: Mark Otto &lt;markd.otto@gmail.com&gt;
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
@@ -39,6 +39,6 @@
 .btn-clipboard {
   position: relative;
   z-index: 2;
-  margin-top: .75rem;
+  margin-top: 1.25rem;
   margin-right: .75rem;
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -359,10 +359,11 @@
   }
 
   pre {
-    padding: 0;
-    margin-top: .625rem;
+    padding: .25rem 0 .875rem;
+    margin-top: .8125rem;
     margin-right: 1.875rem;
-    margin-bottom: .625rem;
+    margin-bottom: 0;
+    overflow: overlay;
     white-space: pre;
     background-color: transparent;
     border: 0;
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
@@ -36,10 +36,18 @@
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
     }
+
+    pre {
+      padding: 0;
+      margin-top: .625rem;
+      margin-right: 1.875rem;
+      margin-bottom: .625rem;
+      overflow: hidden;
+    }
   }
   .btn-clipboard {
     position: absolute;
-    top: -.125rem;
+    top: -.625rem;
     right: 0;
     background-color: transparent;
   }

Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,6 @@`
`39`	`39`	`.btn-clipboard {`
`40`	`40`	`position: relative;`
`41`	`41`	`z-index: 2;`
`42`		`- margin-top: .75rem;`
	`42`	`+ margin-top: 1.25rem;`
`43`	`43`	`margin-right: .75rem;`
`44`	`44`	`}`