Sidebar fixed width at 296px with the TOC width set to 244px:

Current sidebar for Vector is computed in https://github.com/wikimedia/Vector/blob/master/resources/common/variables.less#L115-L118:

// Sidebar
@margin-toc-start-content: 16em;
@space-end-sidebar: 2em;
@width-sidebar: @margin-toc-start-content - @space-end-sidebar;

With base font-size at 16px, @width-sidebar works out to be 256px - 32px = 224px which is confirmed upon inspection on the Vector main branch.

To increase TOC width to 244px and sidebar width to 296px, we can set the following:

// Sidebar
@margin-toc-start-content: 18.5em;
@space-end-sidebar: 3.25em;
@width-sidebar: @margin-toc-start-content - @space-end-sidebar;

The mocks also indicate an increase on the padding of the main page container which is set by https://github.com/wikimedia/Vector/blob/master/resources/common/variables.less#L175 - this can be increased to unit( 40px / @font-size-browser, em ).

To make the header max-width set to 1514px (set by https://github.com/wikimedia/Vector/blob/master/resources/common/variables.less#L174), @max-width-page-container can be increased to unit( 1514px / @font-size-browser, em ).

To make the logo area + hamburger menu occupy the same width as the sidebar, we can add a min-width to the .mw-logo selector. The hamburger menu + right padding take up 58px which leaves 238px for the logo area. In em's the width can be set to 14.375em:

• if we apply a 12px (0.75em) left margin to the entire TOC container (.mw-table-of-contents-container) to get a right margin of 40px
• if we take into account that the searchbox in the header applies a left margin to its div.

Question whether we need to set a max-width? >> answered below in T305069#7832390 -- set only min-width for the time being.

One piece I'm not sure about is getting the top of the TOC in horizontal alignment with the article title - can discuss during grooming.

Preliminary patch below covers most of these adjustments. There may need some more refining with the lining up of the arrows with the hamburger menu icon.

All in all the style updates should be straightforward and just need eagle eyes to confirm precision with mocks.

Change 777004 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update TOC layout styles

https://gerrit.wikimedia.org/r/777004

hi @alexhollender_WMF a few clarifying questions:

• For the max-width of the outer container, setting the header max-width to 1514px with 40px padding on each side brings the total outer container with to 1594px -- is this ok? you specified 1596px in the mocks.
• For the logo area, do you want to define a max-width for it? also is the idea that the search box should line up with the left edge of the main content area?

In T305069#7830275, @cjming wrote:

hi @alexhollender_WMF a few clarifying questions:

• For the max-width of the outer container, setting the header max-width to 1514px with 40px padding on each side brings the total outer container with to 1594px -- is this ok? you specified 1596px in the mocks.

ah yes, that's fine. realizing the 2px difference here is because I have a 1px border on the right & left of the outer container

• For the logo area, do you want to define a max-width for it? also is the idea that the search box should line up with the left edge of the main content area?

I think we decided that a max-width might be risky because it might result in clipping some logos, but that we can at least add a min-width for now. And yes, the idea is that the search box should line up with the left edge of the main content area, so the min-width of the logo area should aim to ensure that happens (aside of course for cases where the logo is so wide that it pushes everything over)

@cjming's POC patch looked pretty good to me and involves minimal additions to the code. I uploaded the visual diff between the HEAD of master (reference) and the POC on top of master (test) at: https://624c8c80318db418c250fe76--stirring-douhua-ac8a6e.netlify.app/html_report/

Namely, there were a couple things I noticed

• The tabs have been moved down which I'm not sure is the desired output. @alexhollender_WMF the spec shows 32px of space between the header and the content, but the POC has 32px between the header and the top of the tabs. Should it be the former or the latter?
• The POC has the TOC a little off-centered from the sidebar: https://624c8c80318db418c250fe76--stirring-douhua-ac8a6e.netlify.app/bitmaps_test/20220405-181127/MediaWiki_Test_vector-2022_0_document_3_desktop-wide.png

Personally, I'd be okay with continuing with Clare's patch without the CSS grid ticket if it continues to mostly involve variable changes and minimal additional lines of code

In T305069#7833212, @nray wrote:

• The tabs have been moved down which I'm not sure is the desired output. @alexhollender_WMF the spec shows 32px of space between the header and the content, but the POC has 32px between the header and the top of the tabs. Should it be the former or the latter?

this prototype has the tabs and is to spec, does that help clarify things? https://di-toc-with-menu-above.web.app/Tuna

I've also looked at @cjming patch. I'm happy to go ahead with the proposal there. I think it shouldn't impact the grid work which will need to revise a lot of this anyway. Nick's UI regression testing suite should flag less regressions if this work is done first. Happy with a small or medium estimate per our earlier discussion.

@alexhollender_WMF yes, thank you and sorry I completely forgot about the prototype! That is super helpful

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/dd4dd325df/w/

Clare my review might take a little longer here as I wanted to use this as an excuse to try out Nick's UI regression suite (here I'm looking for a UI progression :-))

Change 778599 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Style fixes for sticky TOC

https://gerrit.wikimedia.org/r/778599

hi @alexhollender_WMF -- some more follow up Qs:

Regarding the last screenshot in the ticket when you specify that the border edge of the TOC should vertical align with the edge of the hamburger icon -- can you confirm this is what you meant?

Option 1

with gridlines:

without gridlines while hovering over hamburger menu:

without gridlines while NOT hovering over hamburger menu:

Versus having the hover border edge of the hamburger icon vertical align with the border edge of the TOC instead i.e.

Option 2

with gridlines:

without gridlines while hovering over hamburger menu:

without gridlines while NOT hovering over hamburger menu:

I'm erring on Option 1 in my latest patch that combines updates for this ticket and the visual changes task T304166

Also, with the horizontal alignment of the top of the TOC with the article title underline, should this also apply to the sidebar menu as well when it's toggled and rendered above the TOC? I err'd yes on the patch but it can easily be reverted if this horizontal alignment should only apply when the TOC is at the top of the sidebar.

Change 778599 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Style fixes for sticky TOC

https://gerrit.wikimedia.org/r/778599

Doesn't look like the changes are working on 1200px but that could be my misunderstanding. Looks good at normal desktop breakpoint though!

In T305069#7842341, @cjming wrote:

hi @alexhollender_WMF -- some more follow up Qs:
Regarding the last screenshot in the ticket when you specify that the border edge of the TOC should vertical align with the edge of the hamburger icon -- can you confirm this is what you meant?
with gridlines:

yes, this is correct

Also, with the horizontal alignment of the top of the TOC with the article title underline, should this also apply to the sidebar menu as well when it's toggled and rendered above the TOC?

the menu can be aligned higher up, screenshot below also demo if helpful here: https://di-toc-with-menu-above.web.app/Tuna

Change 777004 abandoned by Clare Ming:

[mediawiki/skins/Vector@master] Update TOC layout styles

Reason:

abandoning in favor of combing changes in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/778599

https://gerrit.wikimedia.org/r/777004

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7bf0454258/w/

hi @alexhollender_WMF re: your updated reqs for special pages that need full width - the first column of screenshots under article page with toc indicate that the max-width of the header element should be 1514px -- should the header and main content stretch to the full container beyond 1514px?

This is what a special page looks like with header + main content currently constrained at max-width 1514px within a 2500+px viewport:

You're saying that the header + content containers should stretch to fill the entire viewport (minus 40px left/right margins)?

@cjming this is looking great. notes:

Sticky position of ToC
I apologize for not adding this to the spec to begin with. The ToC should stick 24px from the top of the screen, or 24px from the bottom of the sticky header when logged-in. This seems to already be correct if you've opened the main menu then scrolled down, but when the main menu is closed and you scroll down the ToC sticks a bit too far down:

logged-out		logged-in
menu open	menu closed	men open	menu closed
correct	incorrect	correct	incorrect

Special pages that need full width
Some special pages (e.g. Recent changes, History, Contributions) do not have a max-width on the content area. In those cases the content area should match the width of the header. Currently it is constrained to 1440px via .mw-workspace-container, which I think we could remove at this point.

current	expected

I think removing .mw-workspace-container would also help with the consistency of pages that don't have a ToC, because the main menu would be aligned the same as it is for pages that do have a ToC. For example:

with 1440px max	without 1440px max

In T305069#7846875, @cjming wrote:

You're saying that the header + content containers should stretch to fill the entire viewport (minus 40px left/right margins)?

yes, that's correct ✅

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/7bf0454258/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1bfd991efc/w/

for code + design review: https://patchdemo.wmflabs.org/wikis/c0e2e484ef/wiki/Test-TOC?useskin=vector-2022&tableofcontents=1

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1bfd991efc/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7eb47c98e2/w/

@cjming the patch looks good and the improvements are noticeable. I do think the horizontal alignment for both sidebar and ToC. LGTM!

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/7eb47c98e2/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c0e2e484ef/w/

one more time - for code/design review: https://patchdemo.wmflabs.org/wikis/c0e2e484ef/wiki/Test-TOC?useskin=vector-2022&tableofcontents=1

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/995593dce7/w/

Change 778599 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Layout + visual style changes for sticky TOC

https://gerrit.wikimedia.org/r/778599

Change 782404 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Vertically align header searchbox with main content text

https://gerrit.wikimedia.org/r/782404

Change 782473 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Adjust alignment of searchbox in header

https://gerrit.wikimedia.org/r/782473

Change 782404 abandoned by Clare Ming:

[mediawiki/skins/Vector@master] Vertically align header searchbox with main content text

Reason:

in favor of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/782473

https://gerrit.wikimedia.org/r/782404

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/995593dce7/w/

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c0e2e484ef/w/

Test wiki created on Patch demo by CMing (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/33de85e58a/w/

one more time - for design review: https://patchdemo.wmflabs.org/wikis/33de85e58a/wiki/TestTOCupdates?useskin=vector-2022&tableofcontents=1

In T305069#7846882, @alexhollender_WMF wrote:

Sticky position of ToC
I apologize for not adding this to the spec to begin with. The ToC should stick 24px from the top of the screen, or 24px from the bottom of the sticky header when logged-in. This seems to already be correct if you've opened the main menu then scrolled down, but when the main menu is closed and you scroll down the ToC sticks a bit too far down:

logged-out		logged-in
menu open	menu closed	men open	menu closed
correct	incorrect	correct	incorrect

hi @alexhollender_WMF just a note about the logged-in use case at viewports below 1000px -- the top margin of the TOC should be fixed by this patch that's part of T300612. It can be pulled out into its own patch and hopefully merged right away (cc @bwang) if the sticky header js patch needs more revamping/code review.

Other than this known issue, the changes requested in this ticket + T304166 can be reviewed together at https://patchdemo.wmflabs.org/wikis/33de85e58a/wiki/TestTOCupdates?useskin=vector-2022&tableofcontents=1

Thanks for your patience and props to Bernard + Nick for shining bright lights on my blind spots to get these changes merged.

Change 782473 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Adjust alignment of searchbox in header

https://gerrit.wikimedia.org/r/782473

@alexhollender_WMF @ovasileva The following link shows the visual difference report between last week's release (1.39.0-wmf.7) and this week's upcoming release (1.39.0-wmf.8). It includes the work from this ticket:

https://visionary-halva-dfd216.netlify.app/

The "reference" column shows screenshots from 1.39.0-wmf.7, while the "test" column shows screenshots from 1.39.0-wmf.8. You can click on the red button to only include screenshots where there were visual differences detected. The button says "failed" because it assumes 1.39.0-wmf.7 is the "correct" version, but hopefully the "test" screenshots are "correct". If not, please let us know 😊

Not sure if its helpful as its more noisy, but for kicks I also added a report of the visual diff between 1.39.0-wmf.6 and 1.39.0-wmf.8 which additionally includes the earliest work from T304166: https://glittering-zuccutto-a35151.netlify.app/

@Edtadros - this one is already tracked in T306893: [ToC] Bottom fade issue

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/33de85e58a/w/

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/dd4dd325df/w/