== Steps to reproduce
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Test
== Expected results
When sidebar is longer than content, it pushes the footer down resulting in no overlap.
== Actual results
When sidebar is longer than content, sidebar gives no care in the world and floods the footer. It is also possible for the sidebar to be cut off (by `.mw-page-container`'s `overflow: hidden`).
{F31922391}
== Environments observed
- Beta: https://en.wikipedia.beta.wmflabs.org/wiki/Test
- Locally: Can be observed locally when logged in with modern Vector on and your LocalSettings.php contains `$wgVectorLayoutMaxWidth = true;`
- Will also be apparent in production if/when T246420 is deployed and turned on. One example of where this would occur is at https://en.wikipedia.org/wiki/Wikipedia:Article_wizard.
== Developer Notes
**//Why does this happen?//**
The problem occurs because the sidebar is absolutely positioned, and therefore cannot push the footer down with its height. Note that the sidebar is also absolutely positioned in legacy Vector, but the overlap does not occur with the footer because the footer is made to be the width of the content. Therefore, the sidebar has its own "lane" and never touches the footer.
**//Why is the sidebar absolutely positioned?//**
In an effort to maintain our DOM order for accessibility reasons (T240489), the content continues to be ordered before the header and before the sidebar. Therefore, both the header and sidebar are absolutely positioned in order to accommodate this constraint and make these elements visually appear before the content. I'm not sure if there is any other way to meet this constraint //without// absolutely positioning these elements.
**//What is the fix?//**
There are several ways we could go about this each one with its own suck factor. Other suggestions are welcome:
**Make the content have a min-height of some arbitrary value //x// or make it have a min-height of the viewport height:**
Potential problems:
- This puts a bandaid on the problem and may mitigate its frequency, but we are really just guessing/hoping that the sidebar will not be longer than that //x// height value. The sidebar's height is not within our control and may still exceed //x//.
**Change the design: Make the footer width match the content width. This might look something like:**
{F31921249}
Potential problems:
- Are we okay with the sidebar extending //past// the footer? (This solution would not address that).
- What do we do about the grey area (e.g. if the footer spills into the grey area). Do we remove the grey and replace with white?
- The `mw-page-container` currently has an `overflow: hidden` style applied to it to hide the sidebar when it is collapsing. If we keep the style then the sidebar could also be hidden if it extends past the page container. What to do about this?
- POC: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/610468 (but above concerns/questions still stand)
**Change the DOM order: Move the sidebar next to the content and remove its absolute positioning**
Potential problems:
- Are we okay moving the DOM order around and accepting whatever effect it has on accessibility (where sidebar might be ordered before content)? There was a ton of time spent on T246420 trying to maintain/achieve a DOM order that kept the content above the header/sidebar with this consideration in mind and a lot of time carefully thinking about the tab order and trying to make it work with the checkbox hack. If we go this route, will probably need to have these discussions again and T240489 may very well be a blocker for this task.
- Even if we go this route, what do we use to position the sidebar next to the content? Floats? Flexbox? I made a POC of what using a floated sidebar might look like. It seemed to work mostly well, but I would need to look into addressing a bug when sidebar is closed and viewport width is small.
- POC: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/610458 (but need to address a bug with sidebar closed at small widths)
== QA Steps
### With > 1750 pixel viewport width
1) Visit https://en.wikipedia.beta.wmflabs.org/wiki/Test as an anon. Resize your browser to > 1750px
2) Verify that the footer width matches the content width.
3) Click the sidebar button to show the sidebar.
4) Verify that the footer width matches the content width.
5) Verify that the sidebar is NOT overlapping the footer and all the text in the sidebar and in the footer is legible.
6) Verify that the sidebar is not cut off. The sidebar may extend past the white part of the page and into the grey. That is okay for now.
7) Verify that all of the links in the sidebar are clickable.
### With 1000 pixel viewport width
1) Visit https://en.wikipedia.beta.wmflabs.org/wiki/Test as an anon. Resize your browser to 1000px.
2) Verify that the footer width matches the content width.
3) Click the sidebar button to make the sidebar appear.
4) Verify that the footer width matches the content width.
5) Verify that the sidebar is NOT overlapping the footer and all the text in the sidebar and in the footer is legible.
6) Verify that the sidebar is not cut off. The sidebar may extend past the white part of the page and into the grey. That is okay for now.
7) Verify that all of the links in the sidebar are clickable.