Docs: fix overflow:auto horizontal scrollbars covering last line of c…

…ode 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>
twbs · Mar 4, 2023 · d5f4532 · d5f4532
1 parent ea19c3d
commit d5f4532
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
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;
   }