Plugin Directory: Change pre block overflow to auto.

[softglazee]

What changed

Changed overflow: scroll; to overflow: auto; in wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/components/_code.scss (line 6).

Why

The <pre> blocks currently use overflow: scroll, which unconditionally reserves gutter space for both vertical and horizontal scrollbars regardless of content size. Because these blocks lack a height constraint, vertical overflow does not occur, resulting in an empty vertical gutter. Using overflow: auto reclaims the unused gutter space and preserves the horizontal scrollbar only where the content genuinely overflows.

Measurements

I applied the style change in the browser to measure the effect on scrollbar dimensions (vBarPx and hBarPx). Note that this was measured via browser CSS injection on the live site, not a local build.

Before (overflow: scroll)

Page	row	overflowX	overflowsX	overflowsY	vBarPx	hBarPx
/plugins/gigroute-events/	0	scroll	false	false	15	15
/plugins/gigroute-events/	1	scroll	true	false	15	15
/plugins/softglaze-click-to-chat/	0	scroll	true	false	15	15

After (overflow: auto injected via console)

Page	row	overflowX	overflowsX	overflowsY	vBarPx	hBarPx
/plugins/gigroute-events/	0	auto	false	false	0	0
/plugins/gigroute-events/	1	auto	true	false	0	15
/plugins/softglaze-click-to-chat/	0	auto	true	false	0	15

How to test

1. Load a plugin page with a code block, e.g., https://wordpress.org/plugins/gigroute-events/

2. Run this console script to measure scrollbar width/height (vBarPx/hBarPx) and confirm overflowX:

   console.table([...document.querySelectorAll('pre')].map((el, i) => {
     const cs = getComputedStyle(el);
     const bx = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
     const by = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
     return {
       i,
       overflowX: cs.overflowX,
       overflowY: cs.overflowY,
       overflowsX: el.scrollWidth > el.clientWidth,
       overflowsY: el.scrollHeight > el.clientHeight,
       vBarPx: Math.round(el.offsetWidth - el.clientWidth - bx),
       hBarPx: Math.round(el.offsetHeight - el.clientHeight - by),
       text: el.textContent.trim().slice(0, 30)
     };
   }));

3. Inject the style fix via the console:

   const s = document.createElement('style'); s.id = 'fix-8264'; s.textContent = 'pre { overflow: auto; }'; document.head.appendChild(s);

4. Confirm getComputedStyle(document.querySelector('pre')).overflowX returns auto.

5. Re-run the script from step 2 and compare the gutter dimensions.

Trac ticket: https://meta.trac.wordpress.org/ticket/8264

Use of AI Tools

This PR and the associated measurements were prepared with the assistance of an AI tool to help structure the data and format the report syntax. All testing, validation, environment setup, and conclusions are my own.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props softglaze.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.