jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Nicholas Ray 2020-08-13 16:59:49 -06:00
parent feae33a4e6
commit 7a769a0374
1 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/skins.vector.styles/layout-max-width.less
View File

@ -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