Fix issues on pre rendering r-lib/pkgdown#2970

Author: dieghernan

inst/pkgdown/assets/BS5/rogtemplate.css

@@ -221,13 +221,22 @@ code {
 }
 
 @media (max-width: 575.98px) {
+  /* See https://github.com/r-lib/pkgdown/pull/2970 */
+
   div > pre {
+    border-radius: 0;
+  }
+
+  :not(li, blockquote) > div > pre {
     margin-left: calc(var(--bs-gutter-x) * -0.5);
     margin-right: calc(var(--bs-gutter-x) * -0.5);
-    border-radius: 0;
     padding-left: 1rem;
     padding-right: 1rem;
   }
+
+  :not(li, blockquote) > div > .btn-copy-ex {
+    right: calc(var(--bs-gutter-x) * -0.5 + 5px);
+  }
 }
 
 /* Highlighter based in tango for dark theme */

inst/pkgdown/assets/BS5/rogtemplate.min.css

@@ -52,7 +52,8 @@ Second paragraph
 
 ```{r}
 1 + 2
-```
+``
+`
 </details>
 
 ## Tables
@@ -119,6 +120,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}
@@ -128,7 +186,8 @@ cat(cli::col_blue("This is blue\n"), "\n")
 message(cli::col_green("This is green"))
 
 warning(cli::style_bold("This is bold"))
-```
+`
+``
 Some text
 
 ```{r}
@@ -214,4 +273,4 @@ Guten tag.
 
 This word should be broken across multiple lines on mobile, rather than making the page scroll horizontally:
 
-Ccccccccccccaaaaaaaaaaaaaaatttttttttttttttttssssssssssssssss 
+Ccccccccccccaaaaaaaaaaaaaaatttttttttttttttttssssssssssssssss