Fixed for the WikiEditor in https://bugzilla.wikimedia.org/40610

rahul14m93 wrote:

I have made an attempt to solve this Gerrit Change 54896

https://gerrit.wikimedia.org/r/54896 (Gerrit Change Iee535a5359c03c52f6b72a95807258caf7ba60ae) | Patch Set 1:

I wanted to add box-sizing to textarea before. But I believe someone brought up some things that would be messed up by that change.

And I'm not sure what the value of it on bodyContent is. [by Daniel Friesen]

Related URL: https://gerrit.wikimedia.org/r/54896 (Gerrit Patch-Set: Iee535a5359c03c52f6b72a95807258caf7ba60ae/2)

https://gerrit.wikimedia.org/r/54896 (Gerrit Change Iee535a5359c03c52f6b72a95807258caf7ba60ae) | Code-Review: Verified:+1 Patch Set 2: Verified+1

Build successful

• https://integration.wikimedia.org/ci/job/mediawiki-core-merge/9487/console : SUCCESS
• https://integration.wikimedia.org/ci/job/mediawiki-core-whitespaces/3098/console : SUCCESS (non-voting)
• https://integration.wikimedia.org/ci/job/mediawiki-core-phpcs-HEAD/5575/console : SUCCESS (non-voting)
• https://integration.wikimedia.org/ci/job/mediawiki-core-jslint/4363/checkstyleResult/ : SUCCESS
• https://integration.wikimedia.org/ci/job/mediawiki-core-lint/11336/console : SUCCESS [by jenkins-bot]

Valerie.m.juarez wrote:

In various places we use width: 100%; and give something a border. We should
fix these places by either eliminating the width: 100%; (if it's unnecessary
for that area to have it), or by specifying a box-sizing: border-box; on that
element (with all the fallbacks) so that the width is calculated correctly in
supporting browsers.

Do Rahul's changes fix all the "various places"? Would it be helpful to list point to each place the issue exists so we can 'check off' what's done and make it more obvious as to when this report can be closed?

(In reply to comment #6)

In various places we use width: 100%; and give something a border. We should
fix these places by either eliminating the width: 100%; (if it's unnecessary
for that area to have it), or by specifying a box-sizing: border-box; on that
element (with all the fallbacks) so that the width is calculated correctly in
supporting browsers.

Do Rahul's changes fix all the "various places"? Would it be helpful to list
point to each place the issue exists so we can 'check off' what's done and
make
it more obvious as to when this report can be closed?

Rahul's change would fix the ones related to textareas but it's almost overly broad and would create visual defects in random places we're not expecting. Such as site scripts that we can't possibly find all of and test.

For example:

1. Go to https://pl.wikipedia.org/wiki/Pies_domowy
2. Click on "Zgłoś błąd" in the sidebar
3. Then click on "Przejdź do formularza"

See the textarea there (the big field in the middle) nice and flush with the rest of the form. Try modifying the global textarea to use a border-box box-sizing like that changeset does.

But besides that. This isn't only a matter of textareas. Other elements can also be given 100% width and borders. Like tables, and more. So even that change won't guarantee the bug is fixed.

And these can be all over the place. In core, in special pages and forms we don't use often, extensions, new features we haven't written yet.

Honestly this is almost more like one of our tracking bugs, cause to actually fix this we're going to have to find and fix these in unknown places all over.

Patch still needs review...

(In reply to Daniel Friesen from comment #7)

For example:

1. Go to https://pl.wikipedia.org/wiki/Pies_domowy
2. Click on "Zgłoś błąd" in the sidebar
3. Then click on "Przejdź do formularza"

This should be fixed in
https://pl.wikipedia.org/wiki/MediaWiki:Gadget-wikibugs.css

.reportBugDialog input.text, .reportBugDialog textarea {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}

can replaced by

.reportBugDialog input.text, .reportBugDialog textarea {
margin-bottom: 12px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .4em;
}

Since https://gerrit.wikimedia.org/r/105207 textarea has width: 100%; box-sizing: border-box; but input needs width: 100%; box-sizing: border-box;

#bodyContent { width: 100%; }
is removed in https://gerrit.wikimedia.org/r/120528. Is this bug fixed?

Change 54896 abandoned by TheDJ:
(Bug 34557) Fixed uses of width: 100%; with borders

Reason:
This was eventually dealt with in the patch sets identified in the comments.

https://gerrit.wikimedia.org/r/54896

Let's close this one. I'm sure we will have a few more spots with this, but if and when we identify them, we should probably file separate tickets for those issues.