Page MenuHomePhabricator

Mobile talk page empty state layout displays unexpectedly
Closed, ResolvedPublic




  • Device: iPhone XS
  • Browser: Safari

Issue #1: Reproduction steps

  1. Using the mobile site, visit a project where the Reply and New Topic Tools have been enabled (e.g.
  2. Navigate to a talk page that has not been created yet (e.g.,_Iowa&action=edit&redlink=1)


  1. ❗️Empty state appears with part of the illustration cutoff:

IMG_3024.PNG (2×1 px, 862 KB)


  1. ✅ Entirety of the empty state appears contained within the viewport (read: no part of the design is "off-screen")

Issue #2: Reproduction Steps

  1. Using the mobile site, visit a project where the Reply and New Topic Tools have been enabled (e.g.
  2. Visit your user talk page that has NOT yet been created (e.g. for me that's )


  1. ❗️The title text within the empty state (Bienvenue sur votre page...) seems subject to an unnecessarily narrow "width":

IMG_3021.PNG (2×1 px, 433 KB)


  1. ✅ The title text (Bienvenue sur votre page...) has more "room" to display itself


  • Expected behavior is implemented

Event Timeline

ppelberg renamed this task from Mobile talk page empty state layout seems odd to Mobile talk page empty state layout displays unexpectedly .Apr 1 2022, 5:30 PM
ppelberg updated the task description. (Show Details)

Change 776240 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/DiscussionTools@master] Make empty state image smaller on very narrow (mobile) screens

That's a simple tweak for discussion. I asked Jess to dig up the designs so I know what we're actually supposed to be doing.

I have it as this right now:

image.png (1×808 px, 202 KB)

Are there any technical constraints with implementing the design as I have it @DLynch ?

@iamjessklein The design as-shown doesn't include the body copy and topic-button on the same mockup -- would you want the copy between the title and the image or between the image and the button?

(It's a bigger change to make the image go between any of the existing elements, because it'd require adjusting the HTML we output, rather than just a CSS change.)

Actually, do we need the image? It’s a nice placeholder on desktop so that there’s not too much white space, but on mobile too much white space is certainly not an issue. What about simply hiding it on narrow screens?

Hiding it would be completely trivial.

There aren't two different mockups here but two slightly different experiences (what the user sees on their own page vs. what other users see). Before hiding the illustration, I want to make sure that's clear and feasible.

Oh, yes, there remain different experiences on different pages based on context. It's just that none of the designs cover the specific empty-state case that was referenced in the ticket, which is the empty-state for a non-user talk page.

I see that there's an issue with the mobile version of the empty state on smaller phones as the button might be off the screen by default. For that reason, I'm thinking that we should keep the button (but ensure it's full width) place it above the illustration, and try to create a smaller illustration to use in this situation.

Patch has been updated from Jess' comments. Button's correct now, and the image has been adjusted to be smaller and below said button:

image.png (1×734 px, 162 KB)

Or like this on an iPhone SE:

image.png (1×754 px, 153 KB)

We can either call this good-enough, or we can get a different image entirely if desired. (Or hide the image.)

For completeness sake, here's your own user talk page:

image.png (1×726 px, 129 KB)

And someone else's user talk page:

image.png (1×734 px, 162 KB)

Thanks for the screenshots @DLynch and nice work.
I want to be explicit about a few details:

  1. Button width = is it possible to have the button width match the text width?
  2. @KieranMcCann made a great smaller empty state illustration. I've mocked it up a few ways, but am leaning towards the placement with the image at the top. Thoughts? @ppelberg?

Screen Shot 2022-04-18 at 10.28.02 AM.png (543×659 px, 223 KB)

In Slack @DLynch shared:

I'd take C, mostly because we can't control the height of the viewport and it's the one that guarantees the text and button are all above the fold.

This seems logical so +1 to that.

Mobile Splash - Image bottom.png (1×744 px, 105 KB)

After some more conversation in slack, where we discussed how this page might look with a long title or perhaps a long translation we ultimately are in agreement with @Tacsipacsi and decided that we should remove the image on mobile after all.

Patch is updated, it'll look like this:

image.png (1×734 px, 130 KB)

Change 776240 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] Mobile empty state adjustments: hide image, bigger button

Button width = is it possible to have the button width match the text width?

You mean the text around it, not the text inside it, right? It could be made to do so.

Patch is updated, it'll look like this:

image.png (1×734 px, 130 KB)

iPhone 12 Pro Max
Someone else's talk page:

IMG_4992.jpg (2×1 px, 638 KB)

Own talk page:
IMG_4991.jpg (2×1 px, 253 KB)

iPhone SE
Someone else's talk page:

Screenshot 2022-05-02 at 21.48.53.png (986×556 px, 82 KB)

Own talk page:
Screenshot 2022-05-02 at 21.36.42.png (984×558 px, 97 KB)

@iamjessklein, does it matter that the Add a discussion button for own talk page looks smaller on iPhone 12 Pro Max?

The smaller buttons aren't the empty-state. Those are ones where the discussion tool isn't enabled.

Actually, it's more likely that DiscussionTools is enabled but those pages aren't empty (as-in "not yet created, redlinks").

Following our conversation during standup earlier, I'll go ahead to verify since my tests pass for the scope of this ticket.