# Search dropdown has layout shift on anon view

**URL:** https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159
**Category:** UX
**Created:** [July 10, 2023, 7:44pm UTC](https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159 "2023-07-10T19:44:11Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [July 10, 2023, 7:44pm UTC](https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159/1 "2023-07-10T19:44:11Z")

</div>

Only happens when logged out:

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 11, 2023, 8:54am UTC](https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159/2 "2023-07-11T08:54:36Z")

</div>

Good catch 🙂

Probably easy to fix. It’s because of this rule. If we remove it, the issue disappears:

> <https://github.com/discourse/discourse/blob/3136f6766bb5c8d3859a705ace5b04791b7a3b8e/app/assets/stylesheets/common/base/header.scss#L188>

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [July 11, 2023, 9:06am UTC](https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159/3 "2023-07-11T09:06:04Z")

</div>

Additional info: while the input doesn’t shift when hovering the button when logged in, there’s a pixel-sized white flash in the button’s bottom corners:

![chrome_jtg5cgRbEq](https://global.discourse-cdn.com/meta/original/4X/0/b/4/0b4936c1423609695d6a76bf8a77ba336c795d78.gif)

I think it’s linked to the same issue, and we see the behavior better if we increase the transition duration here:

> <https://github.com/discourse/discourse/blob/3136f6766bb5c8d3859a705ace5b04791b7a3b8e/app/assets/stylesheets/common/base/header.scss#L144>

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [July 11, 2023, 9:17am UTC](https://meta.discourse.org/t/search-dropdown-has-layout-shift-on-anon-view/271159/4 "2023-07-11T09:17:45Z")

</div>

Another fix could be just dropping all of the changing border and padding declarations that happen on header icons on hover and selected states.. 😇

It looks clean by default, but once you change a size or icon it pretty much falls apart.