Skip to content

Wrap search label/input when needed to avoid label runt#57

Merged
iandunn merged 3 commits intotrunkfrom
prevent-search-runt
Apr 11, 2023
Merged

Wrap search label/input when needed to avoid label runt#57
iandunn merged 3 commits intotrunkfrom
prevent-search-runt

Conversation

@iandunn
Copy link
Copy Markdown
Member

@iandunn iandunn commented Apr 10, 2023

Fixes #56

This makes the layout more flexible, to handle cases where the search label is longer than English. Cymraeg, Română, and Deutsch are good examples.

I initially tried out a few ways to make the existing desktop layout work with the longer text, but didn't haven enough success. I think the fundamental fix is to make the layout adapt to the content.

The mobile and wide-desktop layouts are unaffected, but this will make the search label appear on top of the input in-between 769px and 977px.

filter adapt

There may be a better way to design the layout at that breakpoint, this was just my rough attempt. If you see a better way please suggest it!

@iandunn iandunn self-assigned this Apr 10, 2023
@iandunn iandunn added this to the WP20 launch milestone Apr 10, 2023
@iandunn iandunn force-pushed the prevent-search-runt branch from 73a66a8 to 12c422e Compare April 10, 2023 23:03
@iandunn iandunn marked this pull request as ready for review April 10, 2023 23:11
Copy link
Copy Markdown
Contributor

@outdoor2kode outdoor2kode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and look good 👍

@iandunn iandunn merged commit 4d077bb into trunk Apr 11, 2023
@iandunn iandunn deleted the prevent-search-runt branch April 11, 2023 16:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Long search label text expands search box

3 participants