Use of <pre> tag does not invoke horizontal scroll bars

Hello Peter,

I added some css to dev version. You can download it and test now.
It adds a horizontal scrollbar to pre so long code lines display correctly, like in Olivero.

Please let me know if it works as expected on your side.
Thanks!

Hello,
I attached two screenshots and included a live example using the same code.

When comparing Olivero and Solo:

If the code is inside a pre tag only, Solo shows horizontal scrolling while Olivero does not.
If the code is wrapped in both pre and code tags, then both Solo and Olivero show horizontal scrolling.

The actual scrollbar visibility is controlled by the browser and operating system, which use overlay scrollbars that may only appear on hover or while scrolling. The theme only controls whether the content is scrollable, not whether the scrollbar is always visible.

Please let me know if you are seeing the same behavior on your side, or if you are experiencing something different.

Best wishes,
Alaa

Hello,

Thank you for the PDFs and the detailed explanation. Based on the two files you shared, this looks like a caching or deployment issue. Since the teaser view is working correctly, it suggests that the updated code is present in some places but not others.

Could you please check whether this file exists on your site?
"../web/themes/contrib/solo/css/components/solo-text-content.css"

If this file is present, then the new code is already in place.
The CSS in this file does not target specific view modes. Instead, it applies to any pre or code elements inside:

• .field--type-text-long code
• .field--type-text-with-summary code
• .cke_editable code
• .ck-content

In the second PDF you sent, the element includes the class .field--type-text-with-summary, so the CSS should apply there. The live example I shared in my previous message also demonstrates this on a full node view.

Please let me know whether the CSS file exists on your site, and we can continue from there.

Best regards,
Alaa

Hello,

Thank you for the PDF.

Based on what you’re seeing, this looks like a page-level conflict (it could be coming from another stylesheet, a layout wrapper, or an element applying overflow/width rules). I added the exact same markup from your PDF to my example page and it works correctly on my side.

If you can share a link to the affected page (even a temporary one), I can inspect it and try to pinpoint what is overriding the expected behavior.

In the meantime, please try injecting the CSS below and let me know if the horizontal scroll starts working:

#page-wrapper .field--type-text-with-summary pre {
  max-inline-size: 100%;
  overflow-y: hidden;
  overflow-x: auto !important;
  white-space: pre !important;
}

#page-wrapper .field--type-text-with-summary pre code {
  min-inline-size: 100%;
  display: inline-block;
  overflow-x: auto !important;
  white-space: pre !important;
}

Please let me know whether the horizontal (auto) scroll works after this change.

Best wishes,
Alaa

Hello Peter,

Not sure what you mean here. If you are saying the page does not scroll, the link you sent is working correctly. I can see both the code you added and the code in the theme.

If you are referring to the visibility of the scrollbar, this is controlled by the operating system. On both macOS and Windows, scrollbars can be hidden by default and only appear while scrolling. I had to change this setting on my Mac to always show them, and Windows has a similar option.

Hopefully this helps.

Best wishes,
Alaa

Hello Peter,

Thanks for your patience and for the detailed report and link. I’ve identified the issue and pushed a CSS fix to the dev version.
Please download and test it when you can, and let me know if the problem persists.

Best wishes,
Alaa

You are very welcome!