buildkite / terminal-to-html

Converts arbitrary shell output (with ANSI) into beautifully rendered HTML

http://buildkite.github.io/terminal-to-html

MIT License

657 stars 44 forks source link

Prevent wrapping long lines on small screens #115

Open dharmatech opened 1 year ago

dharmatech commented 1 year ago

Hello.

This is an amazing project! Thank you!

Example output

Here, I'm viewing a page generated by terminal-to-html:

Example output on phone

If I open the same page on my phone, the columns aren't lined up:

Question

Is there a way to get the output to not wrap?

Thank you!

dharmatech commented 1 year ago

OK, I'm part way there!

I set white-space to pre:

Desktop

On desktop, if I shrink the window, it looks good (text doesn't wrap):

Mobile

On mobile, the columns align now!

But notice that the black background doesn't cover the whole screen:

dharmatech commented 1 year ago

Here's the page I'm viewing above in case you'd like to recreate the issue on mobile:

https://dharmatech.dev/data/net-liquidity.ps1/test-terminal-to-html.html

dharmatech commented 1 year ago

OK, it looks like this resolves the background issue on mobile:

<body style="width: fit-content;">

triarius commented 1 year ago

Thanks for figuring this out @dharmatech. We think the best way forward is to give users the ability to override the default stylesheet (internal/assests/terminal.css) from the command line with an option like --stylesheet.

We've put this on our backlog, but in the meantime, PRs are welcome!