Update collapsed TOC menu width

Visual changes:
- Collapsed TOC menu width depends on TOC content, with a max width of 51em or 75vw
- Collapsed TOC menu in sticky header no longer has a horizontal scrollbar

Bug: T316056
Bug: T316609
Change-Id: I1da9c16366b55c77ef13bac899ed8ecb2d77fdb9

resources/skins.vector.styles/components/LanguageButton.less

@@ -94,10 +94,6 @@
 	}
 }
 
-#p-lang-btn-sticky-header {
-	white-space: nowrap;
-}
-
 // Hides language button with CSS, ensures language button is in DOM for temporary JS hack for interwiki links
 // Temporary solution to T287206, can be removed when ULS dialog includes interwiki links
 #p-lang-btn.mw-portlet-empty {

resources/skins.vector.styles/components/StickyHeader.less

@@ -63,6 +63,14 @@
 		min-width: 0;
 	}
 
+	// Apply nowrap to title and buttons
+	// Must apply to &-ccontext-bar-primary rather than &-context-bar or &-start
+	// to avoid applying nowrap to the collapsed TOC menu
+	&-context-bar-primary,
+	&-end {
+		white-space: nowrap;
+	}
+
 	//
 	// Components
 	//
@@ -70,7 +78,6 @@
 		border-left: @border-width-base @border-style-base #c8c8c8;
 		margin: 0 15px;
 		padding-left: 30px;
-		white-space: nowrap;
 		min-width: 0;
 	}
 
@@ -83,10 +90,6 @@
 		display: block;
 		position: relative;
 		margin-left: -@icon-padding-md;
-
-		.sidebar-toc {
-			margin: 0;
-		}
 	}
 
 	&-context-bar-primary {

resources/skins.vector.styles/components/TableOfContents.less

@@ -38,7 +38,8 @@
 	max-height: 75vh;
 	padding: @sidebar-toc-vertical-padding @sidebar-toc-right-padding @sidebar-toc-vertical-padding @sidebar-toc-left-padding;
 	box-sizing: border-box;
-	overflow: auto;
+	overflow-y: auto;
+	overflow-x: hidden;
 	background-color: @background-color-page-container;
 
 	.sidebar-toc-header {

resources/skins.vector.styles/components/TableOfContentsCollapsed.less

@@ -3,6 +3,8 @@
 @height-collapsed-toc-button: 36px;
 @padding-top-content-px: unit( @padding-top-content * @font-size-browser, px );
 @selector-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
+// Use calc so that the same max width can apply even when the TOC is in different containers
+@max-width-collapsed-toc: 0.85 * @max-width-content-container; // 51em
 
 #vector-toc-collapsed-button {
 	display: none;
@@ -57,6 +59,15 @@
 	}
 }
 
+// Shared collapsed TOC styles, applies across all collapsed cases (page title, floating, sticky header)
+.mixin-toc-collapsed() {
+	margin: 0;
+	// T316056 Remove TOC menu fixed width and apply max-width
+	// using min() so that the TOC menu doesn't fully cover the text even on small viewports
+	width: auto;
+	max-width: ~'min( @{max-width-collapsed-toc}, 75vw )'; // 51em
+}
+
 // Applies when TOC is collapsed in it's original DOM location
 // Doesn't apply to the collapsed TOC in the sticky header
 .mixin-toc-collapsed-unmoved() {
@@ -69,10 +80,11 @@
 	}
 
 	@{sidebar-toc-selector} {
+		.mixin-toc-collapsed();
 		display: none;
 		position: absolute;
 		top: @height-collapsed-toc-button; // TOC button height
-		margin: @padding-top-content-px 0 0 0; // Account for padding-top from .mw-body
+		margin-top: @padding-top-content-px; // Account for padding-top from .mw-body
 		// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
 		border: @border-width-base @border-style-base @border-color-base;
 	}
@@ -84,19 +96,16 @@
 }
 
 .mixin-toc-collapsed-floating() {
-	#vector-toc-collapsed-button,
-	.sidebar-toc {
-		position: fixed;
-	}
-
 	#vector-toc-collapsed-button {
+		position: fixed;
 		top: 0;
 		left: 0;
 		margin: 0;
 	}
 
 	.sidebar-toc {
-		margin: 0;
+		.mixin-toc-collapsed();
+		position: fixed;
 		left: 6px;
 	}
 }
@@ -145,3 +154,19 @@
 		}
 	}
 }
+
+//
+// Collapsed to sticky header
+//
+.vector-toc-collapsed .vector-sticky-header-toc-container .sidebar-toc {
+	.mixin-toc-collapsed();
+	// T316056 Use max-content because collapsed TOC is absolutely positioned, width is relative to the collapsed TOC button
+	// max-content doesn't account for padding even when we use box-sizing, so use content-box instead
+	// and manually account for horizontal padding in the max width
+	box-sizing: content-box;
+	width: max-content;
+	@sidebar-toc-left-padding-em: unit( @sidebar-toc-left-padding / @font-size-browser, em );
+	@sidebar-toc-right-padding-em: unit( @sidebar-toc-right-padding / @font-size-browser, em );
+	@max-width-sticky-header-collapsed-toc: @max-width-collapsed-toc - @sidebar-toc-left-padding-em - @sidebar-toc-right-padding-em;
+	max-width: ~'min( @{max-width-sticky-header-collapsed-toc}, 75vw )'; // min( 48.5625em, 75vw )
+}