diff --git a/resources/skins.vector.styles.legacy/variables.less b/resources/skins.vector.styles.legacy/variables.less index 577b540e5..08ea6266a 100644 --- a/resources/skins.vector.styles.legacy/variables.less +++ b/resources/skins.vector.styles.legacy/variables.less @@ -2,14 +2,14 @@ // // == Media query breakpoints == +// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html // -@min-width-mobile: @width-breakpoint-mobile; // Above 320px -@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px -@min-width-tablet: @width-breakpoint-tablet; // Above 720px -@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px -@min-width-desktop: @width-breakpoint-desktop; // Above 1000px -@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px -@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px +@max-width-breakpoint-mobile: 719px; +@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`. +@max-width-breakpoint-tablet: 999px; +@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`. +@max-width-breakpoint-desktop: 1199px; +@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`. // Defines the minimum viewport width, at which point the layout will not get any // smaller and will start horizontal scrolling instead. diff --git a/resources/skins.vector.styles/components/Button.less b/resources/skins.vector.styles/components/Button.less index 4df971b10..fbf5d3899 100644 --- a/resources/skins.vector.styles/components/Button.less +++ b/resources/skins.vector.styles/components/Button.less @@ -17,7 +17,7 @@ .vector-header .cdx-button.cdx-button--icon-only { // Increase padding on small viewports // FIXME: Replace with Codex solution i.e. `.cdx-button--size-large` - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { @min-size-interactive-touch: 44px; min-width: @min-size-interactive-touch; min-height: @min-size-interactive-touch; @@ -32,21 +32,21 @@ } .vector-button-flush-left { - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { .cdx-mixin-button-layout-flush( 'start', true ); } - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { .cdx-mixin-button-layout-flush( 'start', true, 'large' ); } } .vector-button-flush-right { - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { .cdx-mixin-button-layout-flush( 'end', true ); } - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { .cdx-mixin-button-layout-flush( 'end', true, 'large' ); } } diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less index 785e973de..9bcdefb26 100644 --- a/resources/skins.vector.styles/components/Header.less +++ b/resources/skins.vector.styles/components/Header.less @@ -24,7 +24,7 @@ // Ensures the button has a font size of 16px font-size: unit( 16 / @font-size-browser, rem ); - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { // Override .cdx-button styles display: none !important; /* stylelint-disable-line declaration-no-important */ } @@ -33,12 +33,12 @@ .vector-typeahead-search-container { display: none; - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { display: block; } } - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { /** * Toggles the visibility of the search box at lower resolutions. */ diff --git a/resources/skins.vector.styles/components/Logo.less b/resources/skins.vector.styles/components/Logo.less index b21f9534c..2588cb1bf 100644 --- a/resources/skins.vector.styles/components/Logo.less +++ b/resources/skins.vector.styles/components/Logo.less @@ -28,7 +28,7 @@ width: @size-mw-logo-icon; height: @size-mw-logo-icon; - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { display: block; } } @@ -49,7 +49,7 @@ width: 100%; } - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { max-width: none; img { diff --git a/resources/skins.vector.styles/components/PageToolbar.less b/resources/skins.vector.styles/components/PageToolbar.less index b6bccc5cd..1b9b787e9 100644 --- a/resources/skins.vector.styles/components/PageToolbar.less +++ b/resources/skins.vector.styles/components/PageToolbar.less @@ -11,7 +11,7 @@ .mw-portlet-views { display: none; - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { &:not( .emptyPortlet ) { display: block; } diff --git a/resources/skins.vector.styles/components/PageTools.less b/resources/skins.vector.styles/components/PageTools.less index 1522108e4..42c6138c6 100644 --- a/resources/skins.vector.styles/components/PageTools.less +++ b/resources/skins.vector.styles/components/PageTools.less @@ -31,14 +31,14 @@ .vector-page-tools .vector-more-collapsible-item { display: block; - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { display: none; } } // Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present) .vector-page-tools .vector-has-collapsible-items { - @media ( max-width: @max-width-mobile ) { + @media ( max-width: @max-width-breakpoint-mobile ) { display: block; } } diff --git a/resources/skins.vector.styles/components/PinnableHeader.less b/resources/skins.vector.styles/components/PinnableHeader.less index fecff810d..3d3cc90b8 100644 --- a/resources/skins.vector.styles/components/PinnableHeader.less +++ b/resources/skins.vector.styles/components/PinnableHeader.less @@ -48,7 +48,7 @@ } // Pinnable behavior is only enabled when JS is enabled and on larger viewports -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { &.client-js { .vector-pinnable-header-unpinned .vector-pinnable-header-pin-button, .vector-pinnable-header-pinned .vector-pinnable-header-unpin-button { diff --git a/resources/skins.vector.styles/components/SearchBox.less b/resources/skins.vector.styles/components/SearchBox.less index d6ce0a602..d964866e5 100644 --- a/resources/skins.vector.styles/components/SearchBox.less +++ b/resources/skins.vector.styles/components/SearchBox.less @@ -15,7 +15,7 @@ } } -@media ( min-width: @min-width-desktop-wide ) { +@media ( min-width: @min-width-breakpoint-desktop-wide ) { .client-js & .vector-search-box.vector-search-box-auto-expand-width { // Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails) margin-left: -@size-search-expand; diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 57ce5885e..050c2bca8 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -116,7 +116,7 @@ } // T298836 Sticky header is only shown at higher resolutions -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { &.client-js.vector-sticky-header-enabled { // T290518: When the sticky header is enabled (feature flag is on, js is // enabled, and viewport is at higher resolutions), add scroll padding to the diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index ad25023e0..34cbe36d1 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -141,7 +141,7 @@ // On smaller viewports the TOC will always be moved to the page titlebar via JS // regardless of the TOC pinned classes -@media ( max-width: @max-width-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { &.client-js .vector-page-titlebar .vector-toc-landmark { display: block; } diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less index 40b84c445..a4b16ead7 100644 --- a/resources/skins.vector.styles/components/UserLinks.less +++ b/resources/skins.vector.styles/components/UserLinks.less @@ -29,7 +29,7 @@ // as well as the dropdown menu itself when the menu is empty &.user-links-collapsible-item, .user-links-collapsible-item { - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { display: none; } } @@ -46,7 +46,7 @@ align-items: center; } - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { // Right margin to separate overflow menu from dropdown margin-right: 8px; @@ -56,7 +56,7 @@ } } - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { // Only apply 8px spacing to normal links (i.e. Create account, User page) // Links with button classes will have a larger touch area // and therefore dont need additional spacing @@ -66,7 +66,7 @@ } .user-links-collapsible-item { - @media ( max-width: @max-width-mobile ) { + @media ( max-width: @max-width-breakpoint-mobile ) { display: none; } } @@ -109,7 +109,7 @@ // T287522#7295558: Increase the max-width of the username when viewport // allows for it. - @media ( min-width: @min-width-desktop-wide ) { + @media ( min-width: @min-width-breakpoint-desktop-wide ) { max-width: unit( 200 / @font-size-browser / @font-size-user-links, em ); } } diff --git a/resources/skins.vector.styles/layouts/grid.less b/resources/skins.vector.styles/layouts/grid.less index f715524a6..eb2df00f3 100644 --- a/resources/skins.vector.styles/layouts/grid.less +++ b/resources/skins.vector.styles/layouts/grid.less @@ -2,7 +2,7 @@ // Grid layout // -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .mw-page-container-inner { display: grid; column-gap: @grid-column-gap; @@ -38,7 +38,7 @@ } } -@media ( min-width: @min-width-desktop-wide ) { +@media ( min-width: @min-width-breakpoint-desktop-wide ) { .mw-page-container-inner { grid-template-columns: @grid-template-column-desktop-wide; } @@ -84,7 +84,7 @@ margin-right: auto; } -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .mw-body { display: grid; grid-template: ~'min-content min-content min-content 1fr / minmax(0, @{max-width-content-container}) min-content'; diff --git a/resources/skins.vector.styles/layouts/toc/pinned.less b/resources/skins.vector.styles/layouts/toc/pinned.less index 55b820b1a..ebe784889 100644 --- a/resources/skins.vector.styles/layouts/toc/pinned.less +++ b/resources/skins.vector.styles/layouts/toc/pinned.less @@ -7,7 +7,7 @@ height: 100%; } -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { &.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc { // Support: Chrome // Work around sticky-positioned layers disabling subpixel text rendering (T327460). diff --git a/resources/skins.vector.styles/layouts/toc/unpinned.less b/resources/skins.vector.styles/layouts/toc/unpinned.less index 489b68a3b..734aa72d5 100644 --- a/resources/skins.vector.styles/layouts/toc/unpinned.less +++ b/resources/skins.vector.styles/layouts/toc/unpinned.less @@ -47,7 +47,7 @@ } &.client-js { - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { // // TOC in page titlebar on narrow screens // @@ -63,7 +63,7 @@ } } - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { // // TOC in page titlebar // @@ -106,7 +106,7 @@ // // Applies simplified TOC styles to No-JS pinned TOC on narrow viewports // - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { &.vector-feature-toc-pinned-clientpref-1 { .vector-sticky-pinned-container { position: static; diff --git a/resources/skins.vector.styles/mixins.less b/resources/skins.vector.styles/mixins.less index b7c427ccf..2649a3f49 100644 --- a/resources/skins.vector.styles/mixins.less +++ b/resources/skins.vector.styles/mixins.less @@ -81,12 +81,12 @@ background-color: @background-color-page-container; box-sizing: border-box; - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { padding-left: @padding-horizontal-page-container-desktop; padding-right: @padding-horizontal-page-container-desktop; } - @media ( min-width: @min-width-desktop-wide ) { + @media ( min-width: @min-width-breakpoint-desktop-wide ) { padding-left: @padding-horizontal-page-container-desktop-wide; padding-right: @padding-horizontal-page-container-desktop-wide; } diff --git a/resources/skins.vector.styles/variables.less b/resources/skins.vector.styles/variables.less index 69d5ae88d..37d540037 100644 --- a/resources/skins.vector.styles/variables.less +++ b/resources/skins.vector.styles/variables.less @@ -2,14 +2,14 @@ // // == Media query breakpoints == +// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html // -@min-width-mobile: @width-breakpoint-mobile; // Above 320px -@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px -@min-width-tablet: @width-breakpoint-tablet; // Above 720px -@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px -@min-width-desktop: @width-breakpoint-desktop; // Above 1000px -@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px -@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px +@max-width-breakpoint-mobile: 719px; +@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`. +@max-width-breakpoint-tablet: 999px; +@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`. +@max-width-breakpoint-desktop: 1199px; +@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`. // Defines the minimum viewport width, at which point the layout will not get any // smaller and will start horizontal scrolling instead. diff --git a/resources/skins.vector.zebra.styles/components/PageTools.less b/resources/skins.vector.zebra.styles/components/PageTools.less index bf8261aa3..3418160ec 100644 --- a/resources/skins.vector.zebra.styles/components/PageTools.less +++ b/resources/skins.vector.zebra.styles/components/PageTools.less @@ -8,14 +8,14 @@ .vector-page-tools .vector-more-collapsible-item { display: block; - @media ( min-width: @min-width-tablet ) { + @media ( min-width: @min-width-breakpoint-tablet ) { display: none; } } // Make sure pcactions is displayed on lower resolutions (even if .emptyPortlet present) .vector-page-tools .vector-has-collapsible-items { - @media ( max-width: @max-width-mobile ) { + @media ( max-width: @max-width-breakpoint-mobile ) { display: block; } } diff --git a/resources/skins.vector.zebra.styles/components/PinnableElement.less b/resources/skins.vector.zebra.styles/components/PinnableElement.less index 5fa83b8fe..6bc3b0a40 100644 --- a/resources/skins.vector.zebra.styles/components/PinnableElement.less +++ b/resources/skins.vector.zebra.styles/components/PinnableElement.less @@ -31,7 +31,7 @@ top: @grid-row-gap; } -@media ( max-width: @max-width-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { /** * At lower resolutions, we want to hide the pinned containers when JS is enabled since these * elements collapse (become unpinned) at this resolution via PinnableElement.js. diff --git a/resources/skins.vector.zebra.styles/components/PinnableHeader.less b/resources/skins.vector.zebra.styles/components/PinnableHeader.less index 349c773aa..7b192ded3 100644 --- a/resources/skins.vector.zebra.styles/components/PinnableHeader.less +++ b/resources/skins.vector.zebra.styles/components/PinnableHeader.less @@ -35,7 +35,7 @@ } // Pinnable behavior is only enabled when JS is enabled and on larger viewports -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { &.client-js { .vector-pinnable-header-unpinned .vector-pinnable-header-pin-button, .vector-pinnable-header-pinned .vector-pinnable-header-unpin-button { diff --git a/resources/skins.vector.zebra.styles/components/StickyHeader.less b/resources/skins.vector.zebra.styles/components/StickyHeader.less index 3b96082cc..a1be13d7d 100644 --- a/resources/skins.vector.zebra.styles/components/StickyHeader.less +++ b/resources/skins.vector.zebra.styles/components/StickyHeader.less @@ -116,7 +116,7 @@ } // T298836 Sticky header is only shown at higher resolutions -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { &.client-js.vector-sticky-header-enabled { // T290518: When the sticky header is enabled (feature flag is on, js is // enabled, and viewport is at higher resolutions), add scroll padding to the diff --git a/resources/skins.vector.zebra.styles/components/TableOfContents.less b/resources/skins.vector.zebra.styles/components/TableOfContents.less index 6dc061779..efb07f08d 100644 --- a/resources/skins.vector.zebra.styles/components/TableOfContents.less +++ b/resources/skins.vector.zebra.styles/components/TableOfContents.less @@ -112,7 +112,7 @@ // On smaller viewports the TOC will always be moved to the page titlebar via JS // regardless of the TOC pinned classes -@media ( max-width: @max-width-tablet ) { +@media ( max-width: @max-width-breakpoint-tablet ) { &.client-js .vector-page-titlebar .vector-toc-landmark { display: block; } diff --git a/resources/skins.vector.zebra.styles/layouts/grid.less b/resources/skins.vector.zebra.styles/layouts/grid.less index 523ea596a..0d73cfad9 100644 --- a/resources/skins.vector.zebra.styles/layouts/grid.less +++ b/resources/skins.vector.zebra.styles/layouts/grid.less @@ -2,7 +2,7 @@ // Grid layout // -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .mw-page-container-inner { display: grid; column-gap: @grid-column-gap; @@ -36,7 +36,7 @@ } } -@media ( min-width: @min-width-desktop-wide ) { +@media ( min-width: @min-width-breakpoint-desktop-wide ) { .mw-page-container-inner { grid-template-columns: @grid-template-column-desktop-wide; } @@ -77,7 +77,7 @@ } } -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { .mw-body { display: grid; grid-template: ~'min-content min-content min-content 1fr / minmax(0, @{max-width-content-container}) min-content'; diff --git a/resources/skins.vector.zebra.styles/layouts/screen.less b/resources/skins.vector.zebra.styles/layouts/screen.less index 0b8f30ce4..525f1fbfd 100644 --- a/resources/skins.vector.zebra.styles/layouts/screen.less +++ b/resources/skins.vector.zebra.styles/layouts/screen.less @@ -19,7 +19,7 @@ html& { --padding-horizontal-content: @padding-horizontal-content-box; } -@media ( min-width: @min-width-desktop ) { +@media ( min-width: @min-width-breakpoint-desktop ) { html& { --padding-horizontal-content: @padding-horizontal-content-box-wide; } diff --git a/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less b/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less index 0ad353a67..e801410ac 100644 --- a/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less +++ b/resources/skins.vector.zebra.styles/layouts/toc/unpinned.less @@ -27,7 +27,7 @@ } &.client-js { - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { // // TOC in page titlebar on narrow screens // @@ -43,7 +43,7 @@ } } - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { // // TOC in page titlebar // @@ -86,7 +86,7 @@ // // Applies simplified TOC styles to No-JS pinned TOC on narrow viewports // - @media ( max-width: @max-width-tablet ) { + @media ( max-width: @max-width-breakpoint-tablet ) { &.vector-feature-toc-pinned-clientpref-1 { .vector-sticky-pinned-container { position: static; diff --git a/resources/skins.vector.zebra.styles/mixins.less b/resources/skins.vector.zebra.styles/mixins.less index de9979caa..797ce3686 100644 --- a/resources/skins.vector.zebra.styles/mixins.less +++ b/resources/skins.vector.zebra.styles/mixins.less @@ -77,12 +77,12 @@ background-color: @background-color-page-container; box-sizing: border-box; - @media ( min-width: @min-width-desktop ) { + @media ( min-width: @min-width-breakpoint-desktop ) { padding-left: @padding-horizontal-page-container-desktop; padding-right: @padding-horizontal-page-container-desktop; } - @media ( min-width: @min-width-desktop-wide ) { + @media ( min-width: @min-width-breakpoint-desktop-wide ) { padding-left: @padding-horizontal-page-container-desktop-wide; padding-right: @padding-horizontal-page-container-desktop-wide; } diff --git a/resources/skins.vector.zebra.styles/variables.less b/resources/skins.vector.zebra.styles/variables.less index 397104d1c..b6ba6ad3c 100644 --- a/resources/skins.vector.zebra.styles/variables.less +++ b/resources/skins.vector.zebra.styles/variables.less @@ -2,14 +2,14 @@ // // == Media query breakpoints == +// See also https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html // -@min-width-mobile: @width-breakpoint-mobile; // Above 320px -@max-width-mobile: @width-breakpoint-tablet - 1px; // Below 719px -@min-width-tablet: @width-breakpoint-tablet; // Above 720px -@max-width-tablet: @width-breakpoint-desktop - 1px; // Below 999px -@min-width-desktop: @width-breakpoint-desktop; // Above 1000px -@max-width-desktop: @width-breakpoint-desktop-wide - 1px; // Below 1199px -@min-width-desktop-wide: @width-breakpoint-desktop-wide; // Above 1200px +@max-width-breakpoint-mobile: 719px; +@min-width-breakpoint-tablet: 720px; // In contrast to Codex `640px`. +@max-width-breakpoint-tablet: 999px; +@min-width-breakpoint-desktop: 1000px; // In contrast to Codex `1120px`. +@max-width-breakpoint-desktop: 1199px; +@min-width-breakpoint-desktop-wide: 1200px; // In contrast to Codex `1680px`. // Defines the minimum viewport width, at which point the layout will not get any // smaller and will start horizontal scrolling instead. diff --git a/skinStyles/ext.echo.styles.alert.less b/skinStyles/ext.echo.styles.alert.less index 3e1fb5974..64badd971 100644 --- a/skinStyles/ext.echo.styles.alert.less +++ b/skinStyles/ext.echo.styles.alert.less @@ -20,7 +20,7 @@ text-overflow: ellipsis; } - @media ( max-width: @min-width-desktop-wide ) { + @media ( max-width: @max-width-breakpoint-desktop ) { .mw-echo-alert { .echo-alert-collapse(); } diff --git a/skinStyles/mediawiki.special.search.interwikiwidget.less b/skinStyles/mediawiki.special.search.interwikiwidget.less index 258bfac5b..4e7d82d25 100644 --- a/skinStyles/mediawiki.special.search.interwikiwidget.less +++ b/skinStyles/mediawiki.special.search.interwikiwidget.less @@ -4,7 +4,7 @@ @import 'mediawiki.skin.variables.less'; .vector-feature-main-menu-pinned-disabled .mw-searchresults-has-iw { - @media only screen and ( min-width: @width-breakpoint-desktop ) { + @media only screen and ( min-width: @min-width-breakpoint-desktop ) { #mw-interwiki-results { display: inline-block; width: ~'calc( 100% / 12 * 3 )';