[HOLD for payment 2023-05-25] Clean up Inline Thread Replies Styles (+ handle mobile/small screen sizes)

[grgia]

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0161e0b6f884ecc108
• Upwork Job ID: 1657133399576674304
• Last Price Increase: 2023-05-12

Coming from this comment: #18274 (comment)

On this PR: #18274

Better mock up:

To do:

• Handle date for long comments (this should match the date with any normal comment though)
• Make avatars 28 x 28
• Cap number of replies at 99+
• Make "Last Reply" -> "Last reply"
• ...

cc @shawnborton sorry for the double ping on this, moving to it's own issue!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0161e0b6f884ecc108

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @aimane-chnaif (Internal)

[grgia]

@shawnborton happy to fix any and all of the UI things !!!! Hit me with them

relevant:
#18274 (comment)
#18274 (comment)

[shawnborton]

Nice! Let's start with what I have above. 28x28 avatars, overlapping at -4px, with a 2px outer border.

[grgia]

Right now, the border width for this component (multiple avatars) is set to 3px for 28x28, should I change it everywhere to 2px or leave as 3px (pictured)

[grgia]

And here's the 99+ preview:

[shawnborton]

I say change it globally. And just confirming that the border goes to the outside?

…

On Fri, May 12, 2023 at 5:59 PM Georgia Monahan ***@***.***> wrote: [image: image] <https://user-images.githubusercontent.com/38015950/238086850-42681f6f-7229-4191-bbdc-08f7473e9cf4.png> Right now, the border width for this component (multiple avatars) is set to 3px for 28x28, should I change it everywhere to 2px or leave as 3px (pictured) — Reply to this email directly, view it on GitHub <#18872 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARWH5RTKAPG7LDC62N77KLXF2XF5ANCNFSM6AAAAAAYAAMKSU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[grgia]

Yep, here's with 2px:

What is the best path forward for the dates on small screen? On tiny screens it gets a little precarious even if I remove the timestamp from the date.

Although for Today/Yesterday it doesn't provide as much info as chat headers do:

But leaving timestamps results in: