Page MenuHomePhabricator

[Desktop Wide resolution] Content area of pages centers when collapsing sidebar on articles with no TOC
Closed, DeclinedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The content area of the page slightly "shift" to the right.

Animation.gif (1×2 px, 1 MB)

What should have happened instead?:
It should not, like pages with a ToC or those that has their ToC collapsed.

Other information (browser name/version, screenshots, etc.):
Tested and replicated on Firefox 104 and Chrome 104.

Event Timeline

It seems to me like the bug is that the content is not centered when the sidebar is collapsed, rather than that the content shifts to make room for the sidebar when the sidebar is expanded.

Unable to reproduce on Win11/Chrome. But clearly happening in your gif.

Jdlrobson renamed this task from Unexpected position shift of the content area of pages with no ToC when expanding sidebar to [Desktop Wide resolution] Content area of pages centers when collapsing sidebar on articles with no TOC.Aug 30 2022, 1:31 PM
Jdlrobson subscribed.

It should not, like pages with a ToC.

I don't completely understand this. On https://fr.wikipedia.org/wiki/Conf%C3%A9rence_de_Kreuznach_(19_d%C3%A9cembre_1917) if I click "hide" on table of contents and collapse the sidebar doesn't the same behaviour happen?

It seems to me like the bug is that the content is not centered when the sidebar is collapsed, rather than that the content shifts to make room for the sidebar when the sidebar is expanded.

  • On pages without a max width e.g. Recent Changes this is expected as the article grows in size.
  • In articles with a max width, if you view the article on a screen resolution less than max width e.g. 900px, the article will shift and expand in size.
  • In large resolution monitors, the content area will be at max width, andot grow in size, but obviously, the collapsing of the sidebar will make it centered. I can't remember exactly if that was an intentional decision, but I do remember some people complaining about the gutter on the left. I'm also not sure why this is a problem - what issue does it actually cause for you from a reading/editing perspective ? (thanks in advance for the context)

I don't completely understand this. On https://fr.wikipedia.org/wiki/Conf%C3%A9rence_de_Kreuznach_(19_d%C3%A9cembre_1917) if I click "hide" on table of contents and collapse the sidebar doesn't the same behaviour happen?

Yes! Apologies for that and I have added that scenario in the task description.

In large resolution monitors, the content area will be at max width, andot grow in size, but obviously, the collapsing of the sidebar will make it centered. I can't remember exactly if that was an intentional decision, but I do remember some people complaining about the gutter on the left. I'm also not sure why this is a problem - what issue does it actually cause for you from a reading/editing perspective ? (thanks in advance for the context)

To me, the problem is the small position shift of the content area when expanding/collapsing the sidebar, as showed in the gif. I personally consider this as an unwanted visual glitch which should be addressed, and I guess some people will have the same complaints. What's your opinion?

Diskdance updated the task description. (Show Details)

Thanks for clarifying! The glitch doesn't bother me personally, as it refocuses the content, but I'm not sure it's something we thought about deeply.

If we want to change that as you've suggested, I think one thing to consider is how complicated it will be to fix and maintain that fix.

ovasileva triaged this task as Medium priority.

@Diskdance the reason why that is happening is because when a page does not have a TOC (or when the TOC is collapsed), we center the content on the page.

content centered at max-widthvideo showing content remaining centered as page width decreases
image.png (2×3 px, 579 KB)

We looked into positioning the content in such a way that would avoid the shift you are pointing out. This would mean that we're basically blocking off the space for the main menu (even when it's collapsed), which results in the content not being centered. This doesn't make much of a difference when the window is wide, but becomes more noticeable, and makes the page look quite imbalanced, at smaller resolutions:

window width: 1727pxwindow width: 1388px
Screen Shot 2022-09-12 at 11.41.41 AM.png (1×1 px, 293 KB)
Screen Shot 2022-09-12 at 11.45.41 AM.png (961×1 px, 265 KB)

I believe the good news is that when we implement an updated grid (see T298198), the width of the main menu would be dynamic, and the shift will no longer happen. I've made a note to include the capability of a pinned main menu into the latest grids prototype (https://dsg-grid-2.web.app/Moss) so that I can double check on that.

How would you feel about closing this task as Declined?

Aklapper added a subscriber: alexhollender_WMF.

Removing inactive assignee. (Please update such things as part of offboarding - thanks.)