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

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

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.

The designs had a more mobile friendly layout.

I have it as this right now:

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.

@iamjessklein gentle bump to address the question @DLynch posed in T305261#7838607.

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:

Or like this on an iPhone SE:

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:

And someone else's user talk page:

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?

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.

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:

Change 776240 merged by jenkins-bot:

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

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

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.

In T305261#7872005, @DLynch wrote:

Patch is updated, it'll look like this:

iPhone 12 Pro Max
Someone else's talk page:

iPhone SE
Someone else's talk page:

@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.