Quick search bar alignment

[ChristophWurst]

Steps to reproduce

1. Set up an account

Expected behavior

Good design

Actual behavior

1. The layout of the search bar going completely to the right
2. The scrollbar starts below which looks somehow weird

Mail app version

v4.0.0-alpha1

Mailserver or service

No response

Operating system

No response

PHP engine version

None

Web server

None

Database

None

Additional info

No response

[ChristophWurst]

@jancborchardt @nimishavijay we need your input.

1. The bar is moved to the right to make room for the nav toggle button.
2. The scrollbar starts below because the search bar is sticky.

[ChristophWurst]

The advanced search icon was moved into the input intentionally: #9755

[nimishavijay]

There seems to be extra space to the right of the nav toggle, where did that come from?

Should be: (margin on search-messages is -1px 0 0 48px;)

But on the current daily: (margin on search-messages is -1px 0 0 52px;)

Tbh scrollbar looks great to me, not going all the way up is expected behaviour at this point (ref. Gmail (scrollbar focused for clarity), Confluence, Notion)

[ChristophWurst]

Tbh scrollbar looks great to me, not going all the way up is expected behaviour at this point (ref. Gmail (scrollbar focused for clarity), Confluence, Notion)

If we compare to Talk with the sticky conversation header, the header has a subtle border at the bottom. We could also have one for the sticky search bar in Mail. That may make the scrollbar a bit less "weird".

[ChristophWurst]

Before	After

(spacing above/below the line is not ideal)

[ChristophWurst]

@nimishavijay ^

[nimishavijay]

That could work! but the border should be a couple of pixels higher, so a bit course to the search bar and farther away from the list item such that the space on the top and bottom of the search bar should is the same.