Page MenuHomePhabricator

Wider tables overlap sticky page tools
Open, HighPublicBUG REPORT

Description

Even before, wider tables were breaking out of the content area, but after the page tools were made sticky, this problem became significantly more problematic, as these tables will now overlap the menu. This is possible, because the content is later in the dom than the menu, because tables size to content and because grid allows elements to overflow outside of the allocated grid space.

Generally wide tables are not at the top of the page, so if the tools are not sticky, you won't encounter this problem.

Screenshot 2023-02-24 at 21.16.46.png (1×2 px, 790 KB)

I added the following for myself to get this somewhat workable, but... it's a bit of a mess.

/* Fix wide tables on narrow layout */
@media all and (max-width:999px) {
	/* table overflow protection */
	.wikitable {
		display: block;
		overflow-x: auto;
		/* table border collapse no longer functions, so remove border */
		border: 0;
		/* The background of the table can now be outside the table, so restore original */
		background-color: unset;
	}
	
	.wikitable > thead,
	.wikitable > tbody,
	.wikitable > tfoot {
		/* Cancel out floating table headers, as this is now within another scroll context */
		top: 0 !important;
		/* Apply the background color here, as no longer on table */
		background-color: #f8f9fa;
	}
}

/* Fix wide tables on pages with tools menu */
@media all and (min-width:1000px) and (max-width:1399px) {
	/* table overflow protection */
	html.client-js.vector-feature-page-tools-pinned-enabled .wikitable {
		display: block;
		overflow-x: auto;
		/* table border collapse no longer functions, so remove border */
		border: 0;
		/* The background of the table can now be outside the table, so restore original */
		background-color: unset;
	}

	html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > thead,
	html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > tbody,
	html.client-js.vector-feature-page-tools-pinned-enabled .wikitable > tfoot {
		/* Cancel out floating table headers, as this is now within another scroll context */
		top: 0 !important;
		/* Apply the background color here, as no longer on table */
		background-color: #f8f9fa;
	}

}

Event Timeline

Setting word-wrap: anywhere can fix the issue if it's caused by text that is long without spaces, however, for images with a fixed width this fix wouldn't work.

Having the table overflow over the end of the width of the page content causes issues, especially when the page tools menu is open.

ovasileva moved this task from Incoming to Current Quarter on the Web-Team-Backlog board.

This seems like a duplicate of https://phabricator.wikimedia.org/T66577 ?

Not completely. As in, before this issue just overflowed and it was an annoyance. Now it overflows AND covers the page tools as you scroll, which is super noticeable and really gives u a ‘broken’ experience.

Right.. I agree this is now more of a problem, but it's the same fundamental issue (Our tables are not responsive)? I would personally call this a duplicate and bump the priority on the other ticket because of this.

As far as I can see all the solutions to this would be the same as T66577:

  • We add horizontal scroll/resize capability to the table (either in templates or code which appears to be what task description is suggesting)

In terms of short-term solutions here:

  • Make tools not sticky on such pages (seems like it would create more confusion than anything)
  • we hide overflow on the content area (potentially worse)

Are there any other short-term/long-term solutions we could be considering?

We need to talk to CT team about this one.

This isn't only about tables used as tables but also other user-generated code such as familytree[1] (which HTML-wise, turns out to be tables as well)

obraz.png (768×1 px, 223 KB)

[1] https://pl.wikipedia.org/wiki/Dynastia_sabaudzka#Ga%C5%82%C4%85%C5%BA_Vaud_od_1254_do_1359_%E2%80%93_baronowie_Vaud[5]