Use CSS flex to arrange sidebar and content

InternationalScratchWiki / ScratchWikiSkin2

Skin for the Scratch Wiki.

https://en.scratch-wiki.info

MIT License

17 stars 15 forks source link

Use CSS flex to arrange sidebar and content #127

Closed Kenny2github closed 1 year ago

Kenny2github commented 1 year ago

Fixes #126. float: left is broken on Safari 16 for some reason, and this is likely a more future-proof solution.

/cc @dominic-03, @GrahamSH-LLK, and @gohoski - please review if you can / have your own MediaWiki instance to test it on. If not, I have this PR on my test wiki: https://test-wiki.abyx.dev

gohoski commented 1 year ago

Works correctly in WebKit on Windows. Will probably also work on other WebKit browsers. Test_WebKit

However, I noticed a pretty big gap on Firefox and Chromium before the footer:

Kenny2github commented 1 year ago

@gohoski How tall is the window on Firefox/Chromium? The footer is always at least at the bottom of the screen, so if the window is tall enough the gap is simply due to my sidebar and content both being too short to fill the screen.

gohoski commented 1 year ago

@gohoski How tall is the window on Firefox/Chromium? The footer is always at least at the bottom of the screen, so if the window is tall enough the gap is simply due to my sidebar and content both being too short to fill the screen.

Oh. Didn't know that. The window is 1920x1080.

dominic-03 commented 1 year ago

Looks good on Safari 17.