pre tag broken in theme preview in themes directory - classic themes

[benimub]

When you preview classic themes in the theme's repo, the content in pre tag is showing scroll. We can fix it by adding a line of CSS.

If you click on the Dhor theme preview. Click on the Element and scroll down you can see the scroll bar in pre section. Please check the below screenshot.
Broken screenshot: theme-preview-broken.jpg
Fixed screenshot: theme-preview-fixed.jpg

[kafleg]

@benimub

Would you please provide the steps on how to fix that? Maybe we need to write the CSS code?

[benimub]

@kafleg you can add this code in style.css under the pre.

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
    white-space: normal;
}

I have added white-space: normal;

[poena]

Each theme needs to solve this individually.
The theme directory can not add CSS that affects the theme presentations.

[benimub]

I found a similar issue in the block themes too. Do block themes also need to fix in that way?
I've created another ticket too. https://meta.trac.wordpress.org/ticket/6392

Fixed the pre tag for theme preview page in themes repo
Here is meta ticket link https://meta.trac.wordpress.org/ticket/6391

[dd32]

#6392 was marked as a duplicate.

[dd32]

Hi @benimub,

The Theme Previewer, wp-themes.com, only displays CSS that the themes themselves have defined.

If you find a theme which does not style pre tags correctly, you can report this to the Theme Author through the Theme Support forums (View a theme in the directory, and find the forums link in the right hand sidebar).

The file you've patched controls the Theme Directory styles, but NOT the styles used within the individual previews (Which are iframes of wp-themes.com - ie. ​https://wp-themes.com/dhor/)

See https://meta.trac.wordpress.org/ticket/6391#comment:7

[joyously]

Not only is this not a preview problem, the theme in question is styling it correctly.
Preformatted text (<pre> tag) is for preserving white space, so the scrollbar is the best way to do that.