Set width of preview to match reading

Preview width is set at 60em, but the container as a different
font-size to .vector-body and so the preview was displaying at
the wrong width.

This change removes the font-size from the grantparent and
re-sets it on the contents of #wikiPreview, ensuring that the
final size matches the actual non-editing width of the body
content.

In addition, the 'submit' action is added to the list of those
excluded from constrained width, so that the editing textarea
remains at full width even when previewing.

Bug: T312963
Change-Id: I1a1df32b00d5faecb73f8c53256342d356a9352c
This commit is contained in:
Sam Wilson 2022-10-18 13:26:31 +08:00
parent 5cadd0b9b0
commit c2e7595809
2 changed files with 12 additions and 1 deletions

View file

@ -485,7 +485,7 @@
"exclude": { "exclude": {
"mainpage": false, "mainpage": false,
"querystring": { "querystring": {
"action": "(history|edit)", "action": "(history|edit|submit)",
"diff": ".+" "diff": ".+"
}, },
"namespaces": [ "namespaces": [

View file

@ -1,7 +1,18 @@
@import '../resources/common/variables.less'; @import '../resources/common/variables.less';
// Reset the font-size for the whole body, but then re-override this below
// to ensure the preview width (which is based on font-size) is correct.
.vector-body {
font-size: @font-size-reset;
}
// Even if the editing form is max-width, the preview should be constrained. // Even if the editing form is max-width, the preview should be constrained.
.skin-vector-disable-max-width #wikiPreview { .skin-vector-disable-max-width #wikiPreview {
max-width: @max-width-content-container; max-width: @max-width-content-container;
margin: auto; margin: auto;
// Change font-size for the actual preview content.
.mw-parser-output {
font-size: @font-size-base;
}
} }