Code overflows container when container is smaller than code.

[goranmoomin]

Code overflows the container when the container is smaller than the code. Below is a picture in macOS Safari Responsive Design Mode where the browser is sized 800x1024. You can see that the code overflows the container, and this makes it harder to see the article in mobile browsers.

I believe that it can be fixed with this added to org-extra.css:

.org-src-container {
    position: relative;
}

pre.src {
    position: unset;
    overflow: auto;
}

pre.src:before {
    right: 30px;
}

It's making the pre.src:before element (the language indicator displayed when hovered) to be positioned relatively to the .org-src-container element instead of the pre.src element, and making pre.src scrollable when overflowed. (BTW, the org-default.css has lots of properties duplicated, looks like you should run a minifier to remove them.)

I believe this is a beneficial change, should I make a PR?

[karlicoss]

@pcr910303 thanks for pointing that out and a code snippet, it works indeed!
I just commited it myself and credited you, wouldn't want to make you go through the hassle of PR as well :)

Yeah, you're righ about a minifier; cleaning up CSS a bit is on my todolist, it's grown a bit chaotically.

[KnowledgeGarden]

I see all the text justified so hard left on a Mac in both Safari and Firefox; Typically, the first letter on each line is missing. Maybe it's a trivial CSS thing?