diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss index 34ce019fa..766c2ab7a 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/04-layouts/header/_header.scss @@ -100,10 +100,20 @@ svg.l-header__search-button-icon-close { .l-header__search { background: gesso-grayscale(gray-1); + display: flex; + gap: 1rem; margin: 0 rem(gesso-site-margins(mobile) * -1); padding: rem(gesso-spacing(2)) rem(gesso-site-margins(mobile)); transition-duration: 1ms; + &[hidden] { + display: none; + } + + form { + flex-grow: 1; + } + @include at-media($theme-header-min-width) { background: transparent; margin: 0; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/_toggle-admin.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/_toggle-admin.scss index ec437ebbb..fc01f7e07 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/_toggle-admin.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/_toggle-admin/_toggle-admin.scss @@ -11,7 +11,6 @@ font-size: 0.875rem; font-weight: normal; line-height: 1.25; - margin-inline-end: 1rem; padding-block: rem(6.25px); padding-inline: 0.75rem; text-decoration: none; diff --git a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/_search--epa.scss b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/_search--epa.scss index e5380e7a7..d8a906f46 100644 --- a/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/_search--epa.scss +++ b/services/drupal/web/themes/epa_theme/source/_patterns/05-components/search/search--epa/_search--epa.scss @@ -5,6 +5,8 @@ @use '../../button' as *; .usa-search--epa { + margin-top: 0 !important; + [role='search'] { @include breakpoint-max(gesso-breakpoint(mobile-lg), true) { display: block; diff --git a/services/drupal/web/themes/epa_theme/templates/layout/page.html.twig b/services/drupal/web/themes/epa_theme/templates/layout/page.html.twig index ecdf400f9..beffa3e68 100644 --- a/services/drupal/web/themes/epa_theme/templates/layout/page.html.twig +++ b/services/drupal/web/themes/epa_theme/templates/layout/page.html.twig @@ -88,11 +88,11 @@ {% endblock %} {% block search %} - {% include '@components/search/search--epa/search--epa.twig' %} - {% if is_admin %} {% include '@components/_toggle-admin/toggle-admin.twig' %} {% endif %} + + {% include '@components/search/search--epa/search--epa.twig' %} {% endblock %} {% block navigation %}