Different rendering of `<pre>` blocks

[dieghernan]

Hi,

I noticed that pkgdown renders the <pre> blocks differently, causing the copy button to overlap with the <pre> border:

Steps to reproduce: https://pkgdown.r-lib.org/articles/customise.html#getting-started > Inspect > Simulate hover in the <pre> blocks before and after the heading > Reduce width viewport (e.g. simulating Samsung Galaxy S8).

This is not a bug in pkgdown but the consequence of two rules in Boostrap 5.3.1:

/* Copy button */

@media (max-width: 575.98px) {
    .btn-copy-ex {
        right: calc(var(--bs-gutter-x) * -.5 + 5px);
    }
}

/* ...more code */

/* Remove margins in pre */
@media (max-width: 575.98px) {
    div>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;
    }
} 

The issue is that the two pre are different, since the first one is preceded by only one div hence not affected by the second rule:

<!-- First pre precedence (starting in <main> -->
main > **div**.sourceCode.hasCopyButton > **pre**.downlit.sourceCode.r

<!-- Second pre precedence (starting in <main> -->
main > **div**.section.level2 > **div**.sourceCode.hasCopyButton > **pre**.sourceCode.yaml

I think a CSS rule like this would fix it (not tested yet):

@media (max-width: 575.98px) {
    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;
    }
} 

Hopefully it is clear...

[dieghernan]

It seems it is coming from pkgdown:

pkgdown/inst/BS5/assets/pkgdown.scss

Lines 649 to 661 in c07d935

	// "Pop" code out of page margins on small screens to give a little more room
	@include media-breakpoint-down(sm) {
	// div.section div.sourceCode pre
	// prevents matching <pre> inside (e.g.) a <li>
	div>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;
	}

[dieghernan]

So I worked out a new CSS rule that captures the pre codes not in a <li> or <blockquote> in small screens, as these are expected to be indented by default. All the rest of cases are treated consistently.

// "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> and <blockquote>
  :not(li,blockquote)>div>pre {
    margin-left: calc(var(--bs-gutter-x) * -.5);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  // Relocate button for selected elements
  :not(li,blockquote)>div>.btn-copy-ex {
    right: calc(var(--bs-gutter-x) * -.5 + 5px);
  }
}

I have a PR ready to deliver including tests in https://github.com/r-lib/pkgdown/blob/main/vignettes/test/rendering.Rmd.