Improve the documentation website rendering such that code blocks are wider on wider screens

[RaghuSpaceRajan]

Proposal

When going through the documentation website and going to the source code from there, the code blocks that appear on the next page have a scrollbar at the bottom if the code is too long to fit inside the code block. While this may be okay on narrower screens, on wider screens still having a narrow code block leads to a poorer experience, because we need to constantly go to the bottom of the page to adjust the scrollbar of the code block. Please see the attached screenshot of this doc page with the scrollbar highlighted on Google Chrome. My proposal is to set the width of these code blocks adaptively based on the window width of the browser.

Motivation

No response

Pitch

No response

Alternatives

No response

Additional context

No response

Checklist

• I have checked that there is no similar issue in the repo

[pseudo-rnd-thoughts]

Thanks for the suggestion @RaghuSpaceRajan

@mgoulao Do you have any ideas? Looking online (chatgpt) we could specify a custom css file in conf.py that contains custom code-block css,

.highlight pre {
    max-width: 80%; /* Or set a fixed width like 800px */
    margin: auto;   /* Center the code block */
    overflow: auto; /* Add scrollbars if content overflows */
}

Do you think this could work?

[mgoulao]

The pages follow a max width to ensure good readability on every screen, and the code blocks just fill that width. I will add some special rules to the Celshast theme to ensure the code blocks fit the content on wider screens.