Responsive layout problems

[behoppe]

Today I improved the documentation landing page and noticed that the three divs don't behave well with different sizing. Responsiveness is problematic in many other places. When the window is narrow, often layout elements become unusably narrow, without rearranging as one would wish. See especially the home page, the blog landing page, and the doc landing page.

Also it seems that the sidebar gets flaky with narrow sizes -- I observed this with the doc landing page.

[behoppe]

The homepage and blog landing page work better now.

The main thing left in this issue is the left sidebar. With narrow views, the body jumps below the sidebar (rogue flex box I think).

[VoxSciurorum]

With Safari 15.5, when the doc page become wide enough for the documentation page to switch to side-by-side display it is not really wide enough and text is lost.

[behoppe]

Thank you @VoxSciurorum. I think we want the three boxes of different categories of documentation to flex-wrap (i.e. to stack up vertically when confined like this). If you have other suggestions for this problem, please let me know.

[behoppe]

See also issue #33: teach performance overflows its box.

[neboat]

On my system, the main content on several pages tends to appear underneath the left sidebar, rather than on the right of that sidebar. It seems that the main content gets moved below the sidebar when it is too wide to put next to the sidebar, given the size of the browser window. I'm noticing this issue in particular when I view the Getting started page on my desktop, where my default browser-window size happens to be a little too narrow to put the sidebar next to the main content on that page.

Suggestion: To help address this issue, can we make code boxes horizontally scrollable? On pages such as the Getting started page, there are a few code boxes with particularly wide content, which seem to force the main content to be fairly wide as well. I imagine that, if the code boxes are horizontally scrollable, then we can limit the width of a code box on any page, and wide code samples won't cause as many layout problems.

[cleiserson]

TB/Bruce,

Can we make them stretchable instead or as well as scrollable? That way, you can pull the corner to make them wide enough if you want to, but the default page width isn't affected.

Cheers, Charles

— Charles E. Leiserson Professor of Computer Science and Engineering Edwin Sibley Webster Professor in Electrical Engineering and Computer Science Margaret MacVicar Faculty Fellow Member of the National Academy of Engineering http://www.nae.edu Fellow of AAAS http://www.aaas.org, ACM http://www.acm.org, IEEE http://www.ieee.org, and SIAM http://www.siam.org.

Computer Science and Artificial Intelligence Laboratory http://www.csail.mit.edu Massachusetts Institute of Technology http://www.mit.edu 32 Vassar Street, #32-G768 Cambridge, MA 02139 USA

MIT Phone: +1-617-253-5833 Web: http://people.csail.mit.edu/cel/ Email: @. Administrative Assistant: Ms. Cree Bruins @.> —

On Fri, Jun 24, 2022 at 4:13 PM Tao B. Schardl @.***> wrote:

On my system, the main content on several pages tends to appear underneath the left sidebar, rather than on the right of that sidebar. It seems that the main content gets moved below the sidebar when it is too wide to put next to the sidebar, given the size of the browser window. I'm noticing this issue in particular when I view the Getting started https://www.opencilk.org/doc/users-guide/getting-started/ page on my desktop, where my default browser-window size happens to be a little too narrow to put the sidebar next to the main content on that page.

Suggestion: To help address this issue, can we make code boxes horizontally scrollable? On pages such as the Getting started page, there are a few code boxes with particularly wide content, which seem to force the main content to be fairly wide as well. I imagine that, if the code boxes are horizontally scrollable, then we can limit the width of a code box on any page, and wide code samples won't cause as many layout problems.

— Reply to this email directly, view it on GitHub https://github.com/OpenCilk/www.opencilk.org/issues/18#issuecomment-1165902118, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA45BOOUWAEOANKQY73PTATVQYJE5ANCNFSM5XCPRVNA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[behoppe]

Yes, @neboat and @cleiserson. I think it should be routine to make code boxes both scrollable and resizable. Thanks for the suggestions. I will include this in verion 1.0.

[behoppe]

1ce84f9926e3c4f4c55c6b6c5e6629765c6b1913 improves two main things

• the flex-box behavior of the doc page, addressing comments of @VoxSciurorum
• the flex-box behavior of the template sidebar and main body, so that page never drops below sidebar, addressing comments of @neboat .

I looked into horizontal scrolling for code blocks (aka pre divs) and it was more complicated than I hoped, because of something to do with the sidebar and the page body that interferes with the expected wrapping behavior of the body. As I shrink my Firefox window, there comes a point when the body stops shrinking and text overflows beyond the window. The code blocks behave the same as the body in this case. But if I make the sidebar disappear (display: none) then the body wraps as expected, and I can control code h-scrolling as I would like.

So IMO the original intent of this issue is essentially done, and I'll leave it open as a holder for the code block styling. Not sure if that still needs to be in version 1.0?

[behoppe]

Recently ffe59b03892f7ba0d008b545c584534990b54e97 addressed code formatting by using pre-wrap instead of pre. I am going to close this issue, since wrapping is much better behaved now that it was when this issue was opened.

[behoppe]

@ailiop thank you for pointing out the limitations of pre-wrap and the need for horizontal scrolling in code blocks. I am reopening this issue.