header search alignment

scss/header.scss

@@ -140,11 +140,18 @@ body.activate-account-page {
         grid-row: 1;
         justify-self: end;
 
+        padding-right: 1em;
+
         // the title and panel don't exist on the same plane
         // so we let the panel overlap the title
         // and fade it out so it looks intentional
+
         background: var(--background-color);
 
+        @media screen and (max-width: 850px) {
+          background: var(--secondary);
+        }
+
         &:before {
           content: "";
           background: linear-gradient(
@@ -152,6 +159,13 @@ body.activate-account-page {
             rgba(255, 255, 255, 0) 0%,
             var(--background-color) 80%
           );
+          @media screen and (max-width: 850px) {
+            background: linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0) 0%,
+              var(--secondary) 80%
+            );
+          }
           top: -0.5em;
           bottom: 0;
           height: 4em;
@@ -167,6 +181,28 @@ body.activate-account-page {
       .after-header-panel-outlet {
         grid-row: 1;
       }
+
+      .before-header-panel-outlet {
+        &:has(.search-banner) {
+          grid-column: 2;
+        }
+
+        @media screen and (max-width: 1280px) {
+          .floating-search-input {
+            margin-left: 2.75em;
+            padding-right: 15em;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    &.search-header--visible
+      .floating-search-input
+      .search-banner-inner.wrap
+      .search-menu {
+      width: 100%;
     }
   }
 }