CSS: horizontal scrolling issue with very long lines

[michaelopdenacker]

Facing an issue with the current CSS. The column with the line numbers ends up in the middle of the text. See the attached screenshot.

Reported by @minimaxwell
Investigated by @tleb

[michaelopdenacker]

@tleb suggested to remove this from http/banner.css:

header.header {
position: relative !important;
}

However, it doesn't work for me, unless I zoom out several times.

[tleb]

Good URL to reproduce the issue: https://elixir.bootlin.com/linux/v2.6.20.7/source/arch/arm26/ACKNOWLEDGEMENTS

Cannot reproduce on the official instance now that the line in comment #276 (comment) is removed. Both Firefox and Chromium.

I believe the issue is wider than that. Eg see the sidebar that scroll once a viewport width is passed. A proper solution would be to rearrange the HTML. Currently when we scroll horizontally everything is scrolling. We therefore have to make sticky everything that shouldn't scroll (ie everything but the code block).

A better solution would be to make only the code block overflow and handle scrolling at that level. That way there is no issue with the positions of all other blocks in the page.

Sidebar issue. It starts scrolling once we scrolled more than one horizontal viewport.

[michaelopdenacker]

Thanks for your investigations! By the way, I reverted the change you suggested on https://elixir.bootlin.com, as it wasn't working for a few of us.

[fstachura]

Another case: https://elixir.bootlin.com/linux/latest/source/Documentation/networking/tls-offload-reorder-bad.svg

This happens, because the main element that contains the sidebar and the code is less wide than the longest line of the code (div with the code overflows). The horizontal scrollbar scrolls the whole document, and when the main element is scrolled out of the viewport, it also takes away the sidebar, because the sidebar is contained within.

A quick solution is to make sure that the main element is as wide as the code, and this can be done by setting the width property of the main element to max-content.

A proper solution would be to rearrange the HTML. Currently when we scroll horizontally everything is scrolling. We therefore have to make sticky everything that shouldn't scroll (ie everything but the code block).

I agree. Is the horizontal scrollbar supposed to be as wide as the viewport?

[tleb]

A quick solution is to make sure that the main element is as wide as the code, and this can be done by setting the width property of the main element to max-content.

I do not think we need to consider a quick and dirty solution. It has been this way since forever. It would take time to develop and test a half-baked solution when we know what the proper should be.

[...] Is the horizontal scrollbar supposed to be as wide as the viewport?

I do not believe it makes sense. We are scrolling file content; scrollbar should be reflecting that.

[michaelopdenacker]

In the meantime, I merged @fstachura 's solution:
a1bff7a