Fixed SearchBar width constantly changing in Safari

[Albermonte]

Too much JS computation, let CSS work its black magic
Tweaked max-width duration value to achieve the same animation effect

Reported error:

Screen.Recording.2024-04-19.at.20.35.17.mov

Fixed:

Screen.Recording.2024-04-20.at.21.10.19.mov

Tested Safari and Brave on macOS. Please test on other OS.

[sisou]

When testing, test also on mobile widths, and with long content there.

[onmax]

Seems fine in chromium for Windows.

Issues

Long content

For the long content something like this seems to work:

.cross-close-button {
  right: 1rem;
}

input {
  padding-right: 4rem;
}

Mobile + Staking

Maybe hide the staking button and the three dots menu when search bar is focussed?

Maybe too complex CSS 🤔

// src/components/SearchBar.vue - Note that this is another style tag and it is not scoped to the component
<style>
.actions-mobile:has(input.search-bar:focus-within) :is(.reset.icon-button,.prestaking-button) {
   opacity: 0;
}
</style>

[Albermonte]

Thanks for the feedback @sisou @onmax

No more issues with long content

Desktop

Mobile

SearchBar on Mobile takes all space

In small phones there was problems when you have the cashlink button + staking + 3 dots, now everything to the right of the searchbar will be set to display: none when focused

No focus

Focused

Extra

Also made some improvements on how the placeholder text is calculated (tested and working in Safari)

[onmax]

Tiny detail:

There is a pixel shift to the top on mobile when you focus the input on mobiles

Recording.2024-04-29.153218.mp4

(Put attention to the to left of the input to see the bug).

I tried to debug it but not sure where the problem is:

• It is not the box-shadow
• It is not the "cross" button

It is a very tiny thing, so not sure if we want to tackle this now :/