Page MenuHomePhabricator

Topic Containers can cause a blank space to appear atop desktop talk pages
Closed, ResolvedPublic

Description

This task involves the work of revising the Topic Container implementation to ensure they can adapt to fill the white space that can sometimes appear atop talk pages.

Behavior

  1. Visit a talk page on desktop in the Vector (2022) skin where A) Topic Containers are enabled and B) a floating archive box is present
2. ❗️Notice the large white space atop the page
Screen Shot 2022-08-18 at 9.04.41 AM.png (1×1 px, 402 KB)
3. ✅ Expected
Screen Shot 2022-08-18 at 9.04.50 AM.png (1×1 px, 695 KB)

Open questions

  • 1. What other right-aligned/floated elements (e.g. Images, infoboxes, {{tracked|TICKET}}) might we need to consider before converging on a solution to the layout issue this ticket is describing?
  • 2. Are the layout issues removing clear:Both would introduce worthwhile? Read: what's a better experience: excessive whitespace atop talk pages in some cases? Topic containers getting "smooshed" when clear:Both is removed?
Case #1Case #2
@Esanders to add screenshot(s)@Esanders to add screenshot(s)

Done

  • Expected behavior is implemented

Notes

@Tacsipacsi and @Ninovolador posit the unexpected behavior is caused by Topic Containers being assigned a clear:both property.


Thank you to @Ninovolador and @Tacsipacsi for reporting this issue:

Related Objects

StatusSubtypeAssignedTask
OpenNone
OpenNone
OpenNone
OpenTrizek-WMF
Resolvedppelberg
OpenNone
Resolvedppelberg
Resolved iamjessklein
Duplicate KieranMcCann
DuplicateNone
ResolvedEsanders
Resolvedppelberg
ResolvedEsanders
Resolvedppelberg
ResolvedDLynch
Resolvedppelberg
Resolved matmarex

Event Timeline

ppelberg moved this task from Untriaged to Upcoming on the Editing-team board.
ppelberg updated the task description. (Show Details)
ppelberg added a subscriber: Esanders.

From our discussion today, example of content leaking into the next topic:

image.png (752×988 px, 215 KB)

Examples from the task description without clear:both:

image.png (923×1 px, 239 KB)

We're currently forcing the headings with new styling to take up full page width, using clear: both to make it appear below any floated content (like those archive boxes, or e.g. image thumbnails).

My preferred fix would be to just remove that, and let them appear alongside any floated content. If that ends up looking weird on any page, there are already established ways to resolve that, which people already use when e.g. a tall image from one discussion section would appear next to comments in the next section (e.g. https://en.wikipedia.org/wiki/Template:Clear#Examples).

If we're concerned about headings getting smooshed beyond recognition, we could also try a compromise where we set a minimal width that we want the headings to take up – say 80% of the content width – so that they would appear alongside floated content narrower than 20%, and below floated content wider than 20%. I'm not sure if it's worth complicating things so much, though.

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

[mediawiki/extensions/DiscussionTools@master] Remove clear:both from topic containers

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

Next steps

  • We need to decide what initial approach we'll take to address this issue.

Test wiki created on Patch demo by PPelberg (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/a3e20f3454/w

If we're concerned about headings getting smooshed beyond recognition...

@matmarex would it be accurate for me to understand the kind of "smooshing" you're referring to above as what's pictured below?

If yes, then I think moving forward with removing clear:both from topic containers as a first step sounds good. If/when this approach proves to be problematic, let's reconsider the minimal width approach you proposed in T315581#8175348.

cc @nayoub so that you're aware of the above. Please comment if you see risks with doing the above.


Topic Container w/ long title w/o clear: both in place
Screen Shot 2022-09-02 at 3.58.13 PM.png (916×1 px, 385 KB)
patchdemo.wmflabs.org/wikis/a3e20f3454

Change 825402 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Remove clear:both from topic containers

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

ppelberg claimed this task.

Test wiki on Patch demo by PPelberg (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/a3e20f3454/w/