Consistent css rules and button alignment for pre blocks in small screens

Author: dieghernan

inst/BS5/assets/pkgdown.scss

@@ -649,17 +649,22 @@ pre div.gt-table {
 // "Pop" code out of page margins on small screens to give a little more room
 @include media-breakpoint-down(sm) {
 
+  // Same radius to all blocks even if no space is added for consistency
+  div>pre {
+    border-radius: 0;
+  }
+
   // div.section div.sourceCode pre
-  // prevents matching <pre> inside (e.g.) a <li>
-  div>div>pre {
+  // prevents matching <pre> inside (e.g.) a <li> and <blockquote>
+  :not(li,blockquote)>div>pre {
     margin-left: calc(var(--bs-gutter-x) * -.5);
     margin-right: calc(var(--bs-gutter-x) * -.5);
-    border-radius: 0;
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
-  .btn-copy-ex {
+  // Relocate button for selected elements
+  :not(li,blockquote)>div>.btn-copy-ex {
     right: calc(var(--bs-gutter-x) * -.5 + 5px);
   }
 }

vignettes/test/rendering.Rmd

@@ -112,6 +112,63 @@ Non-R code in `\preformatted{}`
 yaml: [a, b, c]
 ```
 
+### `pre` blocks
+
+Testing margins and copy buttons on small screens.
+
+```r
+txt <- "Not wrapped; check the copy button behavior."
+```
+
+<section>
+
+Wrapped in a `<section>` (e.g. `section > div > pre`)
+
+```r
+txt <- "Wrapped in section"
+```
+
+</section>
+
+> This is a blockquote with enough text to test the width of the code block and
+> verify whether it aligns with the paragraph width.
+>
+> ```r
+> txt <- "Wrapped in blockquote; margins are preserved."
+> ```
+>
+> Continue…
+
+-   This list item includes enough text to test the width of the code block and
+    check whether it matches the paragraph width.
+
+    ```r
+    txt <- "Wrapped in li; margins are preserved."
+    ```
+
+-   Another bullet.
+
+    1.  Nested list.
+
+    2.  Second level item with enough text to test the width of the code block
+        and confirm alignment with the paragraph.
+
+        ```r
+        txt <- "Wrapped in li; margins are preserved."
+        ```
+
+    3.  Nested list continues.
+
+<details>
+
+<summary>`<pre>` block inside a `<details>` element.</summary>
+
+```r
+txt <- "Wrapped in details"
+```
+
+</details>
+
 ### Crayon
 
 ```{r}