Skip to content

fix(play-console): preserve whitespace #674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OnkarRuikar wants to merge 10 commits into
base: main
Choose a base branch
from
+15 −0
Open

fix(play-console): preserve whitespace #674

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ab2be90
fix(playconsole): avoid whitespace collapse in logs
OnkarRuikar Aug 31, 2025
ef73b20
need margin zero on pre
OnkarRuikar Aug 31, 2025
d570daf
simplify the CSS and handle multiline string
OnkarRuikar Sep 2, 2025
39b364a
Merge branch 'main' into play_console
OnkarRuikar Sep 2, 2025
62dc3e6
::marker is not implemented by safari
OnkarRuikar Sep 2, 2025
9dfc263
use white-space pre-wrap
OnkarRuikar Sep 4, 2025
bfb507d
Merge branch 'main' into play_console
caugner Sep 10, 2025
a6118db
Apply suggestions from code review
OnkarRuikar Sep 10, 2025
e874b14
Merge branch 'main' into play_console
caugner Oct 23, 2025
ac87c53
Merge branch 'main' into play_console
caugner Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion components/play-console/element.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,17 @@ li {
padding: 0 0.5em;

&::before {
vertical-align: top;
content: "> ";
}
}

code {
pre {
Copy link
Contributor

@caugner caugner Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change causes long lines to no longer break:

Where Screenshot
Local image
Prod image

Maybe we should use neither code nor pre, and just set white-space: preserve?

Copy link
Contributor Author

@OnkarRuikar OnkarRuikar Sep 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just white-space: preserve isn't cutting it. The > and ####... are getting rendered on different lines.
We need <li> to not wrap and the text content to wrap. Let me know how the latest commit fares:

1

Code used

console.log("   abcd  d   c  ");
console.log("   abcd  \nd   c  ");
console.log("a".repeat(300));

display: inline-block;

margin: 0;

font-family: var(--font-family-code);

tab-size: 4;
}
4 changes: 1 addition & 3 deletions components/play-console/element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,7 @@ export class MDNPlayConsole extends LitElement {
render() {
return html`
<ul aria-live="polite">
${this._messages.map(
(message) => html`<li><code>${message}</code></li>`,
)}
${this._messages.map((message) => html`<li><pre>${message}</pre></li>`)}
</ul>
`;
}
Expand Down