Page MenuHomePhabricator

WikiEditor way too wide in Vector 2022 when there is a long line without linebreaks
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

Screen Shot 2022-08-06 at 11.22.03 AM.png (84×80 px, 1 KB)

What happens?:
The page (and editor) is very wide, about 200% of the screen width. The behavior is likely to occur if there are very long lines of text without spaces (URLs or chart data as on https://pl.wikipedia.org/w/index.php?title=Pandemia_COVID-19&action=edit). The issue doesn't occur if the left sidebar is hidden or if the syntax highlighter is off.

image.png (936×1 px, 283 KB)

What should have happened instead?:
The long lines of text (very long URL in that case) should be wrapped into several lines and not stretch the editor.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Edge 103.0.1264.77

QA Results - Prod

ACStatusDetails
1T314567#8151547

Event Timeline

Aklapper renamed this task from WikiEditor may get stretched too much in Vector 2022 to WikiEditor way too wide in Vector 2022 when there is a long line without linebreaks.Aug 4 2022, 11:23 AM

Hi @Msz2001, thanks for taking the time to report this!

I can reproduce on https://pl.wikipedia.org/w/index.php?title=Pandemia_COVID-19&action=edit&useskin=vector-2022&safemode=1

This might be the same underlying reason as T314019: Wrong content width for Vector-2022 skin layout if extra-wide elements are used (about viewing but not editing wide tables or wide images).

Jdlrobson subscribed.

Hi thanks for the report! I'm struggling to replicate this one in an incognito window on Edge emulator on either Andre's link or the original link.
{F35399123}

Do I need to be logged in and have certain preferences enabled?

It appears that the issue happens only for logged-in users. No changes to preferences are needed.

This looks like an issue with the grid being set to size 'min-content' and then the content not having a max-width. Much of the content assumes that their containers are the restriction, so setting the container to be unrestricted seems problematic.

https://pl.wikipedia.org/w/index.php?title=Wikipedysta:Ksi%C4%99%C5%BCycowy_Zaj%C4%85c/brudnopis&action=edit&oldid=67755432&safemode=true&useskin=vector-2022

Edit: If I disable this grid template, its fixed

@media screen and (min-width: 1200px)
.vector-layout-grid .mw-page-container-inner {
    grid-template-columns: 284px 20px 1fr;
}

It should probably be:

grid-template-columns: 284px 20px minmax(0,1fr);

And god... didn't know that grid was that unreadable... what a pain to debug.
We should add a Readme.md to the skin's resources directory with an explanation of the grid design I think.

This problem is described quite well in https://css-tricks.com/preventing-a-grid-blowout/

TLDR: Let's add min-width: 0; to .mw-content-container.
Thanks for reporting this one!

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: plwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Open the page (in the default wikieditor): https://pl.wikipedia.org/w/index.php?title=Wikipedysta:Ksi%C4%99%C5%BCycowy_Zaj%C4%85c/brudnopis&action=edit&oldid=67755432
Ensure that the left sidebar is displayed
Ensure that the syntax highlight is turned on by clicking this button:

Screen Shot 2022-08-06 at 11.22.03 AM.png (84×80 px, 1 KB)

✅ AC1: The long lines of text (very long URL in that case) should be wrapped into several lines and not stretch the editor.

The screenshot is from Chrome. This was verified in Edge as well.

Screen Shot 2022-08-13 at 3.33.44 PM.png (1×3 px, 931 KB)

Looks good, resolving!