From 300028a42e35c64c932e0e37899c6145b78dda57 Mon Sep 17 00:00:00 2001 From: bwang Date: Fri, 1 Dec 2023 10:46:45 -0600 Subject: [PATCH] [Zebra] Update to 483c6bb Align sidebar TOC with main menu - Vertically aligns the sidebar TOC and main-menu text, update after sticky-pinned container was split into separate elements. - Consolidate position: sticky and contain: paint styles onto sticky-pinned-container elements 47 expectecd visual changes to desktop-dev Bug: T351697 Change-Id: I76b3e875f5793d3442e84215447a0ab9fa818300 --- .../components/Dropdown.less | 1 - .../components/PinnableElement.less | 3 +++ .../layouts/screen.less | 5 ----- .../layouts/toc/pinned.less | 19 ++++--------------- 4 files changed, 7 insertions(+), 21 deletions(-) diff --git a/resources/skins.vector.zebra.styles/components/Dropdown.less b/resources/skins.vector.zebra.styles/components/Dropdown.less index 3e40a001e..904a286f3 100644 --- a/resources/skins.vector.zebra.styles/components/Dropdown.less +++ b/resources/skins.vector.zebra.styles/components/Dropdown.less @@ -48,7 +48,6 @@ overflow: hidden; z-index: @z-index-dropdown; .mixin-vector-dropdown-menu(); - .mixin-vector-scrollable-with-fade(); max-height: 75vh; } } diff --git a/resources/skins.vector.zebra.styles/components/PinnableElement.less b/resources/skins.vector.zebra.styles/components/PinnableElement.less index d24ec264c..36bbc7387 100644 --- a/resources/skins.vector.zebra.styles/components/PinnableElement.less +++ b/resources/skins.vector.zebra.styles/components/PinnableElement.less @@ -24,6 +24,9 @@ // Applies styles for making a pinned element sticky position: sticky; top: @grid-row-gap; + // Support: Chrome + // Work around sticky-positioned layers disabling subpixel text rendering (T327460). + contain: paint; // Border-box changes the height calculation. box-sizing: border-box; // Height is viewport height - row gap above and below the container. diff --git a/resources/skins.vector.zebra.styles/layouts/screen.less b/resources/skins.vector.zebra.styles/layouts/screen.less index e2b21ef27..507de7703 100644 --- a/resources/skins.vector.zebra.styles/layouts/screen.less +++ b/resources/skins.vector.zebra.styles/layouts/screen.less @@ -156,8 +156,3 @@ body { .skin--responsive .mw-page-container { min-width: auto; } - -.vector-column-end { - // T327460: Prevent subpixel rendering issues associated with the text and Chrome. - contain: paint; -} diff --git a/resources/skins.vector.zebra.styles/layouts/toc/pinned.less b/resources/skins.vector.zebra.styles/layouts/toc/pinned.less index c5970cdf0..f906847f7 100644 --- a/resources/skins.vector.zebra.styles/layouts/toc/pinned.less +++ b/resources/skins.vector.zebra.styles/layouts/toc/pinned.less @@ -1,19 +1,8 @@ -.mw-table-of-contents-container.vector-sticky-pinned-container { +.vector-column-start .vector-sticky-pinned-container { // Aligns the text of the sidebar TOC with the main menu. - margin-left: -@toc-list-item-padding-start; -} - -.mw-table-of-contents-container { - // Needed for Grid-based layout - align-self: start; -} - -&.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc { - // Support: Chrome - // Work around sticky-positioned layers disabling subpixel text rendering (T327460). - // NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements + // The negative margins must be applied here, because .vector-sticky-pinned-container has + // contain: paint, which has an effect similar to 'overflow: hidden', and will prevent elements // inside of the panel from being rendered outside of its bounding box, even when they would // be positioned there using absolute positioning, negative margin, transforms, etc. - // That's why the negative margins have to be applied here, instead of on #vector-toc. - contain: paint; + margin-left: -@toc-list-item-padding-start; }