Page MenuHomePhabricator

[Refactor] Remove duplicative margin and padding from Vector sidebar & ToC
Open, LowPublicBUG REPORT

Assigned To
None
Authored By
Jdrewniak
Oct 27 2022, 8:39 PM
Referenced Files
F41698128: Screenshot 2024-01-18 at 3.39.58 PM.png
Jan 18 2024, 8:48 PM
F41698130: Screenshot 2024-01-18 at 3.39.53 PM.png
Jan 18 2024, 8:48 PM
F41695782: Screenshot 2024-01-17 at 11.20.07 AM.png
Jan 17 2024, 5:05 PM
F41695786: Screenshot 2024-01-17 at 11.20.01 AM.png
Jan 17 2024, 5:05 PM
F37752049: Screen Shot 2023-09-22 at 13.58.58 .png
Sep 22 2023, 8:59 PM
F37751653: Screenshot 2023-09-22 at 3.19.00 PM.png
Sep 22 2023, 7:41 PM
F37751650: Screenshot 2023-09-22 at 3.18.27 PM.png
Sep 22 2023, 7:41 PM
F37751634: Screenshot 2023-09-22 at 3.16.17 PM.png
Sep 22 2023, 7:41 PM
Tokens
"Love" token, awarded by Volker_E.

Description

Problem

In Vector 2022, many elements in the sidebar combine both margin and padding to create spacing. For the most part, this is unnecessary leads to confusion because the value of both properties has to be combined to determine the spacing or size of elements.

The following margin+padding combinations can be removed in favour of one or the other.

Screen Shot 2022-10-27 at 4.25.23 PM.png (268×345 px, 32 KB)
Screen Shot 2022-10-27 at 4.26.19 PM.png (507×343 px, 45 KB)
Screen Shot 2022-10-27 at 4.27.34 PM.png (383×346 px, 43 KB)
Screen Shot 2022-10-27 at 4.29.13 PM.png (396×355 px, 51 KB)
menu headerthe ToC widththe language box marginsarea inside language box
Screen Shot 2022-10-27 at 4.30.27 PM.png (109×333 px, 17 KB)
Screen Shot 2022-10-27 at 4.31.53 PM.png (422×315 px, 38 KB)
Screen Shot 2022-10-27 at 4.33.51 PM.png (345×339 px, 43 KB)
special bottom marginpadding + margin creating menu widthmenu sections with padding+margin

With regards to margin and padding creating the width of the sidebar, those properties should be removed and with width should be determined by the grid area instead. The space between that grid area and the content should be handled by the grid-gap property.

Event Timeline

@Jdrewniak is this still relevant given page tools work and current master? If so I think it could be a good candidate for onboarding

This may be related to the grid/column work proposed in T323141.

This excessive white space between the left TOC and the page content is still causing problems for editors. I hope it can be resolved soon.

See https://en.wikipedia.org/w/index.php?title=Template_talk:Namespaces&curid=32487639&diff=1151424184&oldid=1151141467 where an editor is hoping to work around the narrow band of content by converting a long-standing sidebar template into a navbox.

Previous skins left plenty of room for content with this sidebar present, and you can see in the screen shot below that the biggest problem is excessive white space between the left-side TOC and the page content.

The page in question is https://en.wikipedia.org/wiki/Wikipedia:Template_namespace

Here's the screen shot:
https://imgbb.com/BPZzGr7

It looks like this situation has improved in general (with the non-zebra version too).

Screenshot 2023-09-20 at 5.25.05 PM.png (103×286 px, 14 KB)
Screenshot 2023-09-20 at 5.29.32 PM.png (516×380 px, 48 KB)
Screenshot 2023-09-20 at 5.30.50 PM.png (202×378 px, 27 KB)
Screenshot 2023-09-20 at 5.31.47 PM.png (183×374 px, 29 KB)
✅ menu header✅ the ToC width✅ the language box marginsarea inside language box
Screenshot 2023-09-20 at 5.25.51 PM.png (139×320 px, 17 KB)
Screenshot 2023-09-20 at 5.26.22 PM.png (314×390 px, 33 KB)
Screenshot 2023-09-20 at 5.33.45 PM.png (228×373 px, 26 KB)
✅ special bottom margin✅ padding + margin creating menu widthmenu sections with padding+margin

Given these improvements, I think this task can be resolved :)

@Jonesey95 I the issue with excessive white-space near the TOC, but maybe the "full width" mode can resolve most of the issues editors have with the narrow content area?

I'm still seeing double padding when I look at e.g. https://en.wikipedia.org/wiki/John_Dalton?safemode=1 in Firefox for Mac when I am logged in or logged out.

The screen shots above need to show the grid lines in order to show the double padding. Enable the checkbox next to "div.mw-page-container-inner" in the Grid section of the inspector.

Screen Shot 2023-09-20 at 15.07.52 .png (183×480 px, 37 KB)

The main menu sidebartext has padding to its right, to the left of the vertical grid column space between the left sidebar and the content. That is double padding. The left-side TOC does not extend all the way to the grid column space at its right, cutting off and wrapping words unnecessarily. That is more double-padding. A similar thing happens with the right sidebar, where there is padding between the vertical grid column space and the left side of the words in the sidebar. This double- and triple-padding is unnecessary.

On top of that, the size of the text and the vertical gaps between lines of text in all of the sidebars are still much too large, leading to more unnecessary vertical scrolling in my 1227x706px laptop browser window. I don't know how none of this has been fixed yet.

I have resigned myself to working around the many Vector 2022 whitespace and text sizing and inconsistent sticky header bugs with personal CSS, but I feel sorry for regular editors and readers who have to deal with all of them. At least the CSS is not being overhauled once or twice a week as it was in the early days of Vector 2022, when I had to continually tweak my personal setup.

The main menu sidebartext has padding to its right, to the left of the vertical grid column space between the left sidebar and the content. That is double padding. The left-side TOC does not extend all the way to the grid column space at its right, cutting off and wrapping words unnecessarily. That is more double-padding.

I see what you're saying. The left-padding on the sidebar items seems unnecessary because there's already a grid gap separating the content from the sidebar. The sidebar itself is also moved 22px to the left, which moves it further from the content.

Screenshot 2023-09-22 at 3.16.01 PM.png (740×638 px, 155 KB)
Screenshot 2023-09-22 at 3.16.17 PM.png (740×638 px, 127 KB)
Current paddingend result

Removing that left-padding and positioning would reduce that gap between the content & sidebar.
(We would eventually need some padding to separate the ToC text from an eventual scrollbar.)

Screenshot 2023-09-22 at 3.18.27 PM.png (740×638 px, 156 KB)
Screenshot 2023-09-22 at 3.19.00 PM.png (740×638 px, 127 KB)
No left padding or positioningend result

In general though, given your stated preferences with regards to font-size, line-height and general spacing, I think something like a "compact" mode where spacing is reduced across the board might better address your concerns.

It is challenging to have this conversation in this venue, because the back and forth is so slow. In your second example, you removed the padding, but that moved the TOC text to the left, and now it doesn't align with the left margin. That is undesirable. The content didn't adjust to the left as it should have. The goal of this padding reduction is to make more space for content and reduce readers' and editors' need to scroll vertically.

It could be so much better:

Screen Shot 2023-09-22 at 13.58.58 .png (459×520 px, 108 KB)

It is challenging to have this conversation in this venue, because the back and forth is so slow

What venue would be a good place for you to meet and discuss?

Just an update on this issue.

In your second example, you removed the padding, but that moved the TOC text to the left, and now it doesn't align with the left margin.

In the most recent updates to the Zebra module, we've stopped shifting the TOC to the left so that it's closer to the content, and we've also made it's width be defined by the CSS grid, so that it can be more easily modified with the following css:

/* current value */
.vector-feature-zebra-design-enabled .mw-page-container-inner {
    grid-template-columns: 15.5rem minmax(0,1fr);
}

/* narrower customized sidebar  */
.vector-feature-zebra-design-enabled .mw-page-container-inner {
    grid-template-columns: 10.5rem minmax(0,1fr);
}

I hope this helps (the Zebra design has lost the gray backgrounds for now though).

@Jdrewniak thanks for the update. Is there also a separate css property for the TOC linespacing?

I think aligning the left-most character in the TOC with the gridline is better than aligning the 'collapse' icon with the gridline. (I believe this is what Jonesey meant above, though he wrote "to the left" in one place where I believe he meant "to the right" :) So to reduce extra padding and also keep the TOC closer to the body: the whole body gridline could be moved 22px to the left instead.

I agree that a "compact" mode, perhaps in the new Theme menu, would address Jonesey's requests (whose preferences I share + are common in my editing circles)

@Jdlrobson seconding the comment that this isn't a great forum for design issues, or requests that aren't extremely specific. Better perhaps: a wiki page on "whitespace and padding" with a section for each recurring issue, that can be refactored over time?

Is there also a separate css property for the TOC linespacing?

Not currently, but we have introduced a css property for line-height that's currently only applied to the content: --line-height-medium. One notable thing we have to consider with the ToC line-spacing though is distinguishing between different headings and headings that span multiple lines, as well as distinguishing it from the main content.

We recently deployed a big CSS refactor to all wikis. I think that this resolves the issue mentioned by @Jonesey95 here https://phabricator.wikimedia.org/T321860#9192541 and seen in this screenshot

Screen Shot 2023-09-22 at 13.58.58 .png (459×520 px, 108 KB)

The TOC is no longer positioned outside the grid layout like in the screenshot above and the space between the content & ToC has been reduced.

Screenshot 2024-01-17 at 11.20.01 AM.png (986×1 px, 705 KB)
Screenshot 2024-01-17 at 11.20.07 AM.png (1×1 px, 721 KB)
previouslycurrent

I hope that this change is sufficient to resolve this task.

We are working on improving typography in general though T313828 (currently available as the "Accessibility for Reading (Vector 2022)" beta feature) so expect more changes in this area...

It is difficult to compare the two screenshots, because they appear to have been taken with different screen resolutions. Also, one is logged in and one is logged out, so I can't tell if any user-specific CSS is being applied. Would it be possible to take two comparable screen shots. The second one does look promising, but without the same environment in each, I can't say for sure. Sorry to be so picky.

I do notice in the nicely annotated screen shots that the empty "sitenotice" area is still causing the whole body to be shifted downwards when there is nothing to display there, but that is T325219, a quick win if anyone wants it.

Sorry about that, here are two screenshots that are more similar, these are taken usin archive.org

I agree these kinds of comparisons would be easier if we had a more concrete layout specification.

Thanks for making that extra effort. The screen shots are nicely comparable now by switching two tabs back and forth.

Unfortunately, I notice that the "current" screen shot, despite improving the spacing between the TOC and the article body, appears to have ended up with about 1% less overall horizontal space for the content, which is a regression IMO. Note the second line of the first paragraph, where the word "French" is on line two in the "previous" screen shot, and on line three in the "current" screen shot. The same thing happens with "followers" on the first line of the third paragraph.

I know this stuff is difficult. I'm here to help, I promise.