From 7a769a0374bf5c9e84288cd4d244cb4cc5f01b5b Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Thu, 13 Aug 2020 16:59:49 -0600 Subject: [PATCH] Apply @min-width-supported to .mw-page-container As part of moving search into header work, a min-width (via @min-width-supported variable) was introduced on the body and takes effect when the search feature is enabled. However, given a min-width already exists on the page container from the max-width work, I'm wondering if it makes sense to replace that one with the @min-width-supported variable as it seems like we should only have one min-width vs. having two. Note: As a bonus, this has the (unintended but helpful) side-effect of mitigating the sidebar button being blocked by the personal menu at small viewport widths (T258465). [1] I7f8059d43eaab49de362405784b34a4fe502c7b0 Bug: T258465 Change-Id: I920cd0e9d1564c82bcdc89b721352620158073c6 --- resources/skins.vector.styles/layout-max-width.less | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/resources/skins.vector.styles/layout-max-width.less b/resources/skins.vector.styles/layout-max-width.less index 126fdbf..2bb6200 100644 --- a/resources/skins.vector.styles/layout-max-width.less +++ b/resources/skins.vector.styles/layout-max-width.less @@ -8,7 +8,6 @@ // design will not appear. In either case, the appearance should not be broken. .skin-vector-max-width { @background-color-secondary--modern: #f8f9fa; - @min-width-page-container: 600px; @max-width-page-container: 1650px; @padding-horizontal-page-container: 30px; @min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); @@ -105,7 +104,10 @@ // Container logic. .mw-page-container { - min-width: @min-width-page-container; + // Set a min-width to make explicit we do not support anything below this threshold. + // For devices too small, they should be more useable with horizontal scrolling. + // e.g. Portrait on an iPad + min-width: @min-width-supported; max-width: @max-width-page-container; // Fill the viewport even if the content height is small. This also helps // mitigate a long sidebar overflowing the page container (T257518). @@ -174,13 +176,6 @@ } } - &.skin-vector-search-header { - // Set a min-width to make explicit we do not support anything below this threshold. - // For devices too small, they should be more useable with horizontal scrolling. - // e.g. Portrait on an iPad - min-width: @min-width-supported; - } - // We want it to appear like the sidebar is going into/coming out of // `.mw-page-container`, but we can't use `overflow: hidden` on // `.mw-page-container` because that will cut off the sidebar. Therefore, we