Keeping the same effective height when switching from search input to detached mode #1270

BedheadFred · 2024-07-11T14:22:01Z

BedheadFred
Jul 11, 2024

Hi all, first time posting in a public repo 🙈

We're currently swapping the search input to detached mode when the window reaches a tablet breakpoint. However, from the .gif below you can see that there's a slight visual oddity — one having to do with the padding around the icon, and another having to do with overall height of the box. I'm focusing this discussion on the height for the time being.

See what i mean (see the height change at tablet and at desktop):

We want the height to be 2.5rem (40px), and we've set --aa-search-input-height: 2.5rem. However, this correctly alters the height for the detached version's button, but it measures an effective 42px on the non-detached version, which I believe is due to the following setup:

// mobile
.aa-Autocomplete > .aa-DetachedSearchButton {
	height: var(--aa-search-input-height);
}

// desktop
.aa-Autocomplete > .aa-Form {
	border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha))
}

.aa-Autocomplete >. aa-Form > .aa-InputWrapperPrefix {
	height: var(--aa-search-input-height);
}

.aa-Autocomplete > .aa-Form > .aa-InputWrapper > .aa-Input {
	height: var(--aa-search-input-height);
}

Since .aa-Form doesn't have its own height specification (it wraps around two other components that have heights), this results in the borders taking up 2 pixels of real space that cannot be rectified with box-sizing: border-box.

We can set a height directly on the aaForm class, but ideally would like to change the value of the --aa-search-input-height property and have that reflect the effective height across both variants.

Our workaround right now is to do something like this, to avoid direct class selection:

@media screen and (min-width: 899px) {
  :root {
    --aa-search-input-height: calc(2.5rem - 2px);
  }
}

Would there be an issue with having height directly on .aa-Form?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Keeping the same effective height when switching from search input to detached mode #1270

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Keeping the same effective height when switching from search input to detached mode #1270

Uh oh!

Uh oh!

BedheadFred Jul 11, 2024

Replies: 0 comments

BedheadFred
Jul 11, 2024