Docs: fix overflow:auto horizontal scrollbars covering last line of code blocks ...

* 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>

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 97b454e0395146aae0567d1f912270a8629d3363..de709d09ba7f4f3e4a29f46f3e44b0669b64fc29 100644 (file)
--- 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 bc75559aa51e59001d3474d08f2baacf0647d78b..14adbe94d48be2d588aaa97904fb71042b7a4988 100644 (file)
--- 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 d39f640ae71d31a2647ae19bcde6d518b14b4d7f..4ca5068bcda7ebb98790f6ecaa4761ddf924778a 100644 (file)
--- 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;
   }