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:
parent
feae33a4e6
commit
7a769a0374
|
@ -8,7 +8,6 @@
|
||||||
// design will not appear. In either case, the appearance should not be broken.
|
// design will not appear. In either case, the appearance should not be broken.
|
||||||
.skin-vector-max-width {
|
.skin-vector-max-width {
|
||||||
@background-color-secondary--modern: #f8f9fa;
|
@background-color-secondary--modern: #f8f9fa;
|
||||||
@min-width-page-container: 600px;
|
|
||||||
@max-width-page-container: 1650px;
|
@max-width-page-container: 1650px;
|
||||||
@padding-horizontal-page-container: 30px;
|
@padding-horizontal-page-container: 30px;
|
||||||
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container );
|
@min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container );
|
||||||
|
@ -105,7 +104,10 @@
|
||||||
|
|
||||||
// Container logic.
|
// Container logic.
|
||||||
.mw-page-container {
|
.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;
|
max-width: @max-width-page-container;
|
||||||
// Fill the viewport even if the content height is small. This also helps
|
// Fill the viewport even if the content height is small. This also helps
|
||||||
// mitigate a long sidebar overflowing the page container (T257518).
|
// 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
|
// 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`, but we can't use `overflow: hidden` on
|
||||||
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
|
// `.mw-page-container` because that will cut off the sidebar. Therefore, we
|
||||||
|
|
Loading…
Reference in New Issue