diff --git a/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css b/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css index 571fcd1f8..ee590f5b6 100644 --- a/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css +++ b/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css @@ -25,20 +25,31 @@ div.awesomplete li[aria-selected="true"] mark { .search-wrap div.awesomplete > ul { top: 40px; + max-width: 100%; text-align: left; max-height: 13.5em; color: #404040; - overflow: auto; + overflow-x: hidden; background: linear-gradient(to bottom right, #fff, hsla(0, 0%, 100%, 0.9)); } +@media (min-width: 400px) { + .search-wrap div.awesomplete > ul { + max-width: calc( 100vw - 50% - var(--wp--custom--alignment--scroll-bar-width) ); + } +} + +.search-wrap div.awesomplete > ul li { + padding-right: 20px; +} + .search-wrap-inline div.awesomplete > ul { right: 0; left: auto; } .search-wrap .searchform label div.awesomplete > input, -.search-wrap div.awesomplete { +.search-wrap div.awesomplete { width: 100%; } @@ -51,7 +62,7 @@ div.awesomplete li[aria-selected="true"] mark { .search-wrap div.awesomplete { /* This is for the input to expand */ - display: flex; + display: flex; } div.awesomplete > ul::before {