diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss index 9f4790a8e..e62e0ab13 100644 --- a/source/wp-content/themes/wporg-developer/scss/main.scss +++ b/source/wp-content/themes/wporg-developer/scss/main.scss @@ -1686,6 +1686,7 @@ a.screen-reader-text:focus, } .site-title { + margin-right: 20px; @media screen and (max-width: 500px) { margin-bottom: 2rem; @@ -2911,8 +2912,13 @@ button.code-tab.is-active { } &.search-wrap-inline .search-field { + width: calc(100vw - 60px); margin: 0; border: none; + + @media ( min-width: 501px ) { + width: 100%; + } } &.search-wrap-embedded .search-field { @@ -2922,7 +2928,7 @@ button.code-tab.is-active { } &.search-wrap-embedded .search-post-type { - margin-top: 2rem; + margin-bottom: 2rem; justify-content: space-between; color: $color-white; max-width: 450px; diff --git a/source/wp-content/themes/wporg-developer/searchform.php b/source/wp-content/themes/wporg-developer/searchform.php index 40e26d17c..19f260f1b 100644 --- a/source/wp-content/themes/wporg-developer/searchform.php +++ b/source/wp-content/themes/wporg-developer/searchform.php @@ -30,17 +30,11 @@ ?>
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 { diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css index 22d97ca23..bb23fb7bf 100644 --- a/source/wp-content/themes/wporg-developer/stylesheets/main.css +++ b/source/wp-content/themes/wporg-developer/stylesheets/main.css @@ -2382,6 +2382,10 @@ a.screen-reader-text:focus, } } +.site-branding.has-actions .site-title { + margin-right: 20px; +} + @media screen and (max-width: 500px) { .site-branding.has-actions .site-title { margin-bottom: 2rem; @@ -3552,10 +3556,17 @@ button.code-tab.is-active { } .search-wrap.search-wrap-inline .search-field { + width: calc(100vw - 60px); margin: 0; border: none; } +@media (min-width: 501px) { + .search-wrap.search-wrap-inline .search-field { + width: 100%; + } +} + .search-wrap.search-wrap-embedded .search-field { margin-bottom: 0; max-width: 400px; @@ -3563,7 +3574,7 @@ button.code-tab.is-active { } .search-wrap.search-wrap-embedded .search-post-type { - margin-top: 2rem; + margin-bottom: 2rem; justify-content: space-between; color: #fff; max-width: 450px;