We just realized this is not only about tables, but:

• Not only tables can be collapsed, but other elements as well.
• It's also about the sorting feature.

We propose the most trivial baseline we can think of that does not do much but getting rid of the bug (that is: having broken buttons in the interface):

• After cloning the popup contents, remove all collapse/expand buttons. These can be identified by their class mw-collapsible-toggle.
• Remove all sorting toggles/icons by removing the two classes sortable and jquery-tablesorter.

Unfortunately it's not possible to expand the element by removing a class. What jquery.makeCollapsible.js does is adding display: none all over the place. We should not duplicate the code that undoes this, but call it. But this should be a separate ticket, possibly even including UX and design investigation.

Hi @thiemowmde - I'm reviewing this ticket and before looking for a solution, I want to make sure I'm understanding the full issue.

Your baseline solution about removing the collapse/expand button might make it seem a bit less broken, but if a user is seeing a collapsed table I don't think it makes much more sense and doesn't give them a way out (or to the information). A few of the other options proposed above, particularly the ones which bring the user down the full table make sense to consider.

A few questions:

Not only tables can be collapsed, but other elements as well.

What are the other elements which this might apply to? Also do you have a sense of how common these types of references occur?

It's also about the sorting feature.

What is the sorting feature? Could you point me to an example that I could test with the current feature?

Compare to what the MobileFrontend does.

I've also checked on mobile, it seems like they have a 'working' solution where the tables are expanded - is this a helpful precedent for us? We have less space, but if we're able to re-use their approach that could be a quick improvement. On a sidenote, I also checked the iOS app, and tables seem to break the entire reference there.

removing the collapse/expand button […]

The (only) benefit of this is that there is no broken button any more, and it's the by far cheapest thing to do. Given how rare this is, I would not invest to much time. But yea, our solution should probably not be that cheap. ;-)

doesn't give them a way out […]

One "way out" is always to jump down to the actual reference.

What are the other elements […]

The collapsing feature works with any <div>. As far as I'm aware of this is used a lot, e.g. in large navigation bars at the bottom of articles. To be fair, such elements typically don't appear in references. But since a reference is essentially a full wikitext document, we should consider this, I believe.

What is the sorting feature?

Table headers can have little triangles to re-order the table's contents. As far as I remember (was a while ago) these triangles appear in our popups, but clicking them doesn't do anything, even if the table is expanded. Again, the probably cheapest thing to do is to remove the triangles.

I've also checked on mobile, it seems like they have a 'working' solution […]

Could it be that mobile "works" because tables are never collapsible nor sortable there?

Ok after reviewing, I would say that there are two options we could pursue: minimum and ideal.

Ideal
Remove table and an inline OOUI notice message: “This reference includes a table which does not fit in the preview. Click "Jump to reference" to see the full content.”

Minimum
Remove expand/collapse button which does not click. This would show either an expanded or collapsed depending on the current state in the bottom reference portion. Remove sorting arrows for columns of the table as well.

I think the ideal is much more ideal than the minimum and would pursue this, but I'm not sure about the effort difference between the two options. As this is not a common occurrence, we've agreed not to invest a significant amount of time in this.

Sounds good! We might want to review some details after this is implemented and we can play around with it. Not meant to be discussed now, just as a reminder:

• Since it's not only about tables, a more generic message might be good.
• Should the OOUI notice have a box or be inline?
• Can we deliver the same information in a shorter message? The popup is quite narrow. The shorter, the better.
• Can we have a "jump down" button or link instead of an instruction that asks the user to click a button somewhere else?

Good points! I'm going to update the task description but will also give answers here.

Since it's not only about tables, a more generic message might be good.

Done, let me know if you think 'graphic' is the best generic descriptor or if there is something else.

Should the OOUI notice have a box or be inline?

Inline, see the mock.

Can we deliver the same information in a shorter message? The popup is quite narrow. The shorter, the better.

Good point, I've included a suggestion.

Can we have a "jump down" button or link instead of an instruction that asks the user to click a button somewhere else?

Since the button is there, I actually think referencing is not really necessary. I think mock makes it look like it'll be pretty clear. What do you think?

Change 636180 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Popups@master] [WIP] Handle collapsible & sortable elements in reference popups

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

Change 636982 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Popups@master] Add (i) info icon to collapsible replacement message

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

There has already been some discussion about the term "graphic", but maybe it's worth pointing out that the fix won't apply to graphics? For example, a large image in a footnote will render thus:

It's meant to hide collapsible elements. These are typically tables, sometimes other stuff (e.g. certain templates, or parts of a template). What is a good generic word for this that is not "table"? Element? Section? Figure?

Change 636180 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Handle collapsible & sortable elements in reference popups

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

In T220208#6588217, @thiemowmde wrote:

It's meant to hide collapsible elements. These are typically tables, sometimes other stuff (e.g. certain templates, or parts of a template). What is a good generic word for this that is not "table"? Element? Section? Figure?

Good question, but I'll try not to bikeshed here. As far as communication with the user goes, I think this will make the point.

I mostly wanted to clarify that graphics were *not* affected by the work done in this task.

Change 637497 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Popups@master] [DNM] Change "graphic" to "figure" in placeholder message

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

Change 636982 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Add (i) info icon to collapsible replacement message

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

Change 637497 merged by jenkins-bot:

[mediawiki/extensions/Popups@master] Change "graphic" to "figure" in placeholder message

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