Page MenuHomePhabricator

Layout issue with edit link in table caption in TemplateData
Open, Needs TriagePublicBUG REPORT

Description

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

  • Open a page that contains a template with TemplateData where no parameters are specified.

Example: https://www.mediawiki.org/wiki/Template:Used_by

  • Switch the display language to Japanese and compare the style.

Example: https://www.mediawiki.org/wiki/Template:Used_by?uselang=ja

What happens?:

The translated Japanese term "テンプレートパラメーター" for the table caption "Template parameters" is displayed with a narrow width, causing it to appear vertically elongated.

What should have happened instead?:

The translated term "テンプレートパラメーター" should have been displayed with an appropriate width, occupying either one or two lines.

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

Browser: Google Chrome 114.0.5735.134

Actual: The translated term "テンプレートパラメーター" displayed with narrow width, spanning multiple lines.

image.png (422×320 px, 17 KB)

Expected: The translated term "テンプレートパラメーター" displayed with an appropriate width.

image.png (138×524 px, 16 KB)

Event Timeline

This is the same problem in all languages, it's just a problem with mobile:

Screenshot_20230617-141512.png (2×1 px, 196 KB)

.mw-templatedata-doc-params .mw-templatedata-caption {
	margin: 0.5em 10em;
}

would make that happen, yeah.

The margin is to prevent overlap with the edit button. There should probably be a different layout on mobile.

I get why it is there, I don't think that is how it should be solved. It’s bad even on desktop, for example https://www.mediawiki.org/wiki/Template:Used_by?uselang=ru renders for me like this:

image.png (307×558 px, 15 KB)

Change 931976 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/TemplateData@master] Put [Edit template data] link on its own line

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

@Esanders: what about moving the [Edit template data] link from the table caption before TemplateData template description instead? I think that might clear this issue better (and would make table caption more accessible tbh) than putting it on its own line, which also might be problematic due to how .mw-editsection-like is assigned line-height: 0 by default.

I'm not a fan of moving the edit link out of the table, alignment would break with narrower tables for one.

I would prefer to use the existing pattern of having the [ edit ] link next to the "heading":

image.png (256×901 px, 37 KB)

Small tables will not have it next to the heading, and semantically, it makes it confusing to put it there given that the text above that table heading is also edited via TemplateData.

Captions are read out in screen readers like headers if the user chooses to navigate that way, so I imagine there is a similar annoyance to our ancient "move edit link outside the header". (And the only other option for a table is not in the table.)

Separately, any width using margin is going to be pretty sensitive to the language used for the text of the edit link. Not just the main caption text but also that text directly. It's not a good strategy. (For example, Module:Navbox does the same thing for collapsing, but it's 4em on the sides for en.wp's "show"/"hide", but 6em for the native English's "collapse" and "expand". I assume other languages have different values.)

I would also be in favor of moving the edit link to the top of where TemplateData has control (or potentially between the data and the pre-data material).

This task could be as well resolved with a media query, ignoring the readout question.

I'm not a fan of moving the edit link out of the table, alignment would break with narrower tables for one.

I don't understand this comment at all.

@stjn @Izno Would either of you have the time to propose a patch showing exactly what you mean? Right now I feel that Ed's patch is an improvement and I'm inclined to merge it, but I'd also be happy to merge some other solution.

matmarex renamed this task from Layout issue with translated Japanese term for table caption in TemplateData to Layout issue with edit link in table caption in TemplateData.Jul 31 2023, 9:33 AM

Change 931976 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Left align caption and put [Edit template data] inline

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

Esanders claimed this task.
TripleCamera2022 subscribed.

The layout issue still exists: The "Edit template data" button is split into two lines.

https://www.mediawiki.org/wiki/Template:!!?uselang=en&safemode=1

T339806_reopen.png (568×753 px, 54 KB)

Besides, the current style may be misleading: "Template parameters" is not a heading, but a caption.