From d5f4532b3eb0c1ae2c904bb58c488bc3da44b8f3 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Sat, 4 Mar 2023 20:05:54 +0000
Subject: [PATCH] Docs: fix overflow:auto horizontal scrollbars covering last
 line of code blocks (#37694)

* 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 <markd.otto@gmail.com>
---
 site/assets/scss/_clipboard-js.scss       |  2 +-
 site/assets/scss/_component-examples.scss |  7 ++++---
 site/assets/scss/_masthead.scss           | 10 +++++++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 97b454e039..de709d09ba 100644
--- 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
index bc75559aa5..14adbe94d4 100644
--- 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
index d39f640ae7..4ca5068bcd 100644
--- 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;
   }