Page MenuHomePhabricator

[Zebra] You have new message toolbar is too small and too close to the toolbar in zebra design
Open, LowPublic

Assigned To
None
Authored By
Ladsgroup
May 5 2023, 11:14 AM
Referenced Files
F41888925: Screenshot 2024-02-13 at 6.25.18 PM.png
Feb 14 2024, 2:25 AM
F41888916: Screenshot 2024-02-13 at 6.24.31 PM.png
Feb 14 2024, 2:25 AM
F37001146: Screenshot 2023-05-16 at 10.46.00 AM.png
May 16 2023, 2:49 PM
F37001122: Screenshot 2023-05-16 at 10.31.26 AM.png
May 16 2023, 2:37 PM
F37001102: Screenshot 2023-05-16 at 10.21.58 AM.png
May 16 2023, 2:37 PM
F36990879: grafik.png
May 10 2023, 9:51 AM
F36976714: grafik.png
May 5 2023, 11:14 AM

Description

This is what I'm getting when I go to my home wiki:

grafik.png (89×347 px, 5 KB)

Basically there is no space between the yellow bar and border, also it's below. Can it stay up? It looks weird to me.

Event Timeline

This looks as expected. We have responsive styles that kick in to push it underneath when we believe there's a chance of no space. We have to consider the variable length of the username, so this might be more noticeable with your short username. Could you provide some more information on your display e.g. viewport size and the URL of your home wiki (don't want to assume)? It's hard to tell from your cropped screenshot.

Here is a URL: https://fa.wikipedia.org/wiki/%D8%AA%D9%88%D8%B5%DB%8C%D9%81%E2%80%8C%D9%87%D8%A7%DB%8C%20%D8%B1%DB%8C%D8%A7%D8%B6%DB%8C%20%D9%85%DB%8C%D8%AF%D8%A7%D9%86%20%D8%A7%D9%84%DA%A9%D8%AA%D8%B1%D9%88%D9%85%D8%BA%D9%86%D8%A7%D8%B7%DB%8C%D8%B3%DB%8C?VectorZebraDesign=1&useskin=vector-2022

My viewport is 1846 pixels wide.

I'm not that upset about it being below, what annoys me is that it looks smaller and most importantly there is no space between bottom of the notice and border of the toolbar. This might make it more visible:

grafik.png (191×1 px, 43 KB)

Jdlrobson lowered the priority of this task from Medium to Low.May 15 2023, 5:35 PM

The awkwardness is due to the new gray background in Zebra. The yellow banners position has not changed, and the font-size is the same as in pre-zebra and Legacy Vector, but with the gray background, the yellow banner now sits on the bottom edge of the header:

Screenshot 2023-05-16 at 10.21.58 AM.png (476×1 px, 144 KB)

What I think we should do is reduce the padding in the Zebra header from 8px to 4px (which is something I remember Alex mentioning anyway) that way the notification banner will overlap some of the gray area, making it more visually distinct. It'll also move the content 8px higher on the page.

Screenshot 2023-05-16 at 10.31.26 AM.png (301×953 px, 50 KB)

(current vs proposed)

Regarding the banner looking too small, it does have a 12px font-size (which is inherited from legacy Vector) which looks tiny in certain scripts like Arabic:

Screenshot 2023-05-16 at 10.46.00 AM.png (280×1 px, 56 KB)

(current 12px vs 14px font-size)

We could remove that 12px font-size rule which would increase the font-size to 14px, matching the rest of the UI text.

Jdrewniak renamed this task from You have new message toolbar is too small and too close to the toolbar in zebra design to [Zebra] You have new message toolbar is too small and too close to the toolbar in zebra design.May 17 2023, 3:57 PM