Code examples are sometimes too wide for their box

[david-christiansen]

Right now, code examples that are too wide overflow the allowed space. This is especially a problem on mobile browsers.

Screenshots:

[klequis]

I'm happy to address this issue. I have received a lot of help from folks in the Haskell community and have been looking for a way to give something back. If you would like me to do so I can get back to you in a few days with my thoughts on changes?

[david-christiansen]

It would be great if you could do that! Thanks!

[klequis]

It seems like most sites, including my own, use a horizontal scrollbar when a code example is too wide for the screen.

For the error message, which isn't in a table, the overflow can be corrected with

pre {
  overflow-x: auto;
}

However, this doen't work in a table (atleast I couldn't get it to do so or find a answer searching) and therefore doesn't work for the before and after examples.

Personally, I think the before and after should be horizontal (side-by-side) on screens that are wide enough but should switch to a vertical layout for for narrow screens / phones. To achieve this the examples need to be taken out of a table and flexbox is introduced to the CSS.

Please let me know if you want to stick with tables or try the flexbox approach.

I created a live demo to show this http://haskell-error-index.s3-website-us-west-2.amazonaws.com/, but that's an odd looking link from a stranger so here are screenshots.

Full-screen

iPad portrait

Width of iPhone 11

but made taller

Extra narrow

to force the before and after to overflow

Screen capture from my Samsung S8 phone

[david-christiansen]

This looks great!

I don't see any reason not to do the flexbox approach, but I'm not an expert on modern CSS. It's important to me that the site remain easy to build, contribute to, and run, and that means that we don't require the installation of extra preprocessors or other tools not on Hackage. It's also important that we support a reasonable collection of web browsers, but MDN says that Flexbox has been basically supported everywhere since 2015, which seems fine to me.

Please send a PR :-)

[david-christiansen]

On your demo site, I see React errors in the JS console. I'd really like to avoid heavyweight JS like React on this site, and keep it as a collection of static HTML and CSS, with bits of JS thrown in for optional creature comforts. This is for the sake of minimizing the skills needed to contribute to and maintain the site. If we ask for both Haskell and React skills, then we're excluding a lot of potential contributors.

[klequis]

The demo on S3 is fully static with no React. I gutted and hijacked the local web server and build process from a react project so I could get the demo together without having to learn Hakyll first.

[david-christiansen]

Ah, great! I'd hate for you to put in a ton of work and then end up not merging due to mismatching long-term tech priorities on the project.