MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 427: / Line 427: @@
 }
-/* TOC list item — flex so link and toggle sit on same line */
+/* TOC list item — flex so link and toggle sit on same line.
+   flex-wrap: nowrap prevents rows from stacking/overlapping. */
 .vector-toc .vector-toc-list-item {
    display: flex !important;
    align-items: center !important;
-   flex-wrap: wrap !important;
+   flex-wrap: nowrap !important;
+  min-height: 0 !important;
 }
@@ Line 441: / Line 443: @@
 /* Sublist takes full width on its own line */
 .vector-toc .vector-toc-list-item > .vector-toc-list {
-   flex: 0 0 100% !important;
+   flex: none !important;
+  width: 100% !important;
+  display: block !important;
 }
-/* Toggle button — inline, no box */
+/* Toggle button — fixed px dimensions so it's immune to the parent's
+   large font-size (1.1em) and line-height (2). align-self: center
+   ensures it vertically centres in the flex row regardless of how
+   tall the link text is. */
 .vector-toc .cdx-button.vector-toc-toggle {
    flex: 0 0 auto !important;
@@ Line 455: / Line 462: @@
    min-width: 0 !important;
    min-height: 0 !important;
-   width: 1.4em !important;
+   width: 24px !important;
-   height: 1.4em !important;
+   height: 24px !important;
+  align-self: center !important;
    cursor: pointer !important;
    opacity: 0.5;
@@ Line 498: / Line 506: @@
 }
-.vector-toc-link,
+/* min-height (not fixed height) so the link can grow with its content.
-.vector-toc-toggle {
+   The toggle no longer inherits this as a constraint. */
-   height: 2rem;
+.vector-toc-link {
+   min-height: 2rem;
    display: flex;
    align-items: center;
 }
 .gr-doc-teekas { margin-bottom: 1em; }