RecentDmConversationsPage: Breaks with nonzero horizontal device insets

[chrisbobbe]

Such as on an iPhone 15 Pro in landscape mode. Seen here in a simulator, with the not-yet-merged unread counts from #334. I'm long-pressing to show how the row responds:

[chrisbobbe]

Labeling "a-design" because I'm not sure how best to handle device insets for screen content like this.

cc @alya @terpimost

I see basically two approaches to solve this. (In these screenshots I'm also long-pressing a row, and it still shows the not-yet-merged unread counts from #334.)

1. Have each row extend out to the edge of the screen and pad the insets; something like this:

2. Add a container around the whole list and have it pad the insets; something like this:

[chrisbobbe]

A note about the screenshots in my previous message. On the side opposite the iPhone's black oval (for the camera), there's maybe more space than seems necessary: it looks like we reserve approximately the width needed for another camera notch, even though there isn't one on that side. But that's just what happens when we faithfully follow the measurements iOS gives us for the horizontal insets, and you'll commonly see a similar effect in other apps.

[gnprice]

Good question. My inclination would be for option 2. Is there another app or two where you can conveniently provoke the same situation and see how they handle it?

[chrisbobbe]

Gmail on iPhone is mixed; here are some screenshots. Unfortunately you'll have to imagine my phone's rounded corners and the camera notch, which don't show up in its take-a-screenshot feature. This is on my iPhone 13 Pro.

They do option 1:

They do option 2:

And they do a better (I think) version of option 2 where the area covered by the ink effect is also visible when you're not pressing a row, as a nice surface with rounded corners:

[chrisbobbe]

Wikipedia on iPhone—in lists like these—seems to prefer option 1 consistently. It has some bugs where some content fails to position outside the insets:

(see "Add another language", and the line under it, are outside the safe area)

[gnprice]

Cool, thanks. I guess those are inconclusive, then, and I'd still incline toward option 2 pending input from @terpimost.

version of option 2 where the area covered by the ink effect is also visible when you're not pressing a row, as a nice surface with rounded corners:

I think this works well in that settings screen, where there's several sections and they each have a heading above them. On this screen, though, I think the rounded effect would look odd at the top and bottom of the list.

[terpimost]

In my design buttons have rounding corners, and there is always a gap between edge of a screen, so in cases when you have safe area it shouldn't be a problem... I do suggest to don't support landscape mode.

I don't assume we have material UI components and their tap animations... I suggest to not bring it to iOS version at least.
I think it is ok to darken the hit area or a button on tap. We can also scale down the button a bit as a default option. It is also ok to not bother for the smaller elements which user might not even see under the finger.