@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

@Jdrewniak is this fixed with zebra?

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

✅ menu header	✅ the ToC width	✅ the language box margins	area inside language box
✅ special bottom margin	✅ padding + margin creating menu width	menu 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.

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.

Current padding	end 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.)

No left padding or positioning	end 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:

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

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.

previously	current

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

previous	current

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.