fix(select): vertically center arrow

[tczhao]

fixes argoproj/argo-workflows#7789

center align select arrow, fixes hidden arrow on no text selection

left(old) -> right(new)
argo-workflow:

argo-cd:

[terrytangyuan]

Thank you! I'll let others to double check as I am not familiar with this repo.

[github-actions]

Stale pull request message

[agilgur5]

@tczhao does the Workflows UI still have this issue? If so we can re-open and merge this

[tczhao]

Hi @agilgur5 ,

Thanks for looking into this,
we still have this issue,

Let me test with the suggested changes

[tczhao]

We have the following

        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);

---

        position: absolute;
        top: 37%;
        right: 0;

---

        position: absolute;
        top: 0;
        right: 0;

[agilgur5]

Oh boy, on my monitor, it turns out I've never even seen this arrow, which is probably why I was a little confused when I first looked at your screenshot.

top: 8px; -- the original. invisible/below the fold

top: 0; -- too low

top: 50%; transform: translateY(-50%); -- just right

[agilgur5]

Gosh, my CSS is definitely a bit rusty; this is vertical centering, right, which is one of the most hacky CSS things, and this is a classic "technique" or workaround to achieve vertical centering.
top: 50%; transform: translateY(-50%); means half-way down, and then half of the element's own height back up -- see also this SO answer.

[agilgur5]

Thanks for fixing and double-checking!