Within Olivero's `text-content` class (which gets applied on formatted text), we apply special styles to pre and code elements. Furthermore, if they're nested under a narrow layout (like article content), we will stretch them out to take up more horizontal space (similar to what we do with blockquotes and the article's image). We need to control the stretching at various screen widths to make sure it fills up the optimal space -- and that is where the bug is.

The first bug appears in both Drupal 9 and Drupal 10:

Between 700px and 1000px screen width the code blocks do not take up enough space

The second bug only occurs in Drupal 9 (because of the way that Drupal 9 manages variables)

At larger than 1440px, the code block width will grow in relationship to the viewport width (It shouldn't)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mherchel created an issue. See original summary.

mherchel’s picture

Issue summary: View changes
mherchel’s picture

Status: Active » Needs review
FileSize
3.27 KB
1.14 KB

Fixes attached.

andy-blum’s picture

Status: Needs review » Reviewed & tested by the community

LGTM!

  • lauriii committed c1efe4c on 10.0.x
    Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is...

  • lauriii committed a595534 on 9.5.x
    Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is...

  • lauriii committed f6b7762 on 9.4.x
    Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is...

mherchel credited lauriii.

mherchel’s picture

  • lauriii committed 6a00c3f on 9.3.x
    Issue #3280985 by mherchel, andy-blum: Olivero's code block styling is...
lauriii’s picture

Version: 9.5.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed c1efe4c and pushed to 10.0.x. Also committed to 9.5.x and cherry-picked to 9.4.x and 9.3.x since this is a straight forward bug fix in Olivero. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.