header styling

Author: shakyShane

special-pages/pages/history/app/components/App.module.css

@@ -19,7 +19,7 @@ body {
     &[data-layout-mode="reduced"] {
         --sidebar-width: 230px;
         --main-padding-left: 28px;
-        --main-padding-right: 56px;
+        --main-padding-right: 36px;
     }
 
     [data-platform="windows"] & {

special-pages/pages/history/app/components/Header.js

@@ -17,7 +17,9 @@ export function Header() {
     const domain = useComputed(() => search.value.domain);
     return (
         <div class={styles.root}>
-            <Controls term={term} range={range} domain={domain} />
+            <div class={styles.controls}>
+                <Controls term={term} range={range} domain={domain} />
+            </div>
             <div class={styles.search}>
                 <SearchForm term={term} domain={domain} />
             </div>
@@ -83,11 +85,9 @@ function Controls({ term, range, domain }) {
     }
 
     return (
-        <div class={styles.controls}>
-            <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title} tabindex={0}>
-                <Trash />
-                <span>{buttonTxt}</span>
-            </button>
-        </div>
+        <button class={styles.largeButton} onClick={onClick} aria-disabled={ariaDisabled} title={title} tabindex={0}>
+            <Trash />
+            <span>{buttonTxt}</span>
+        </button>
     );
 }

special-pages/pages/history/app/components/Header.module.css

@@ -1,5 +1,6 @@
 .root {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     gap: 8px;
     color: var(--history-text-normal);
@@ -10,6 +11,7 @@
 .controls {
     display: flex;
     gap: 8px;
+    flex-shrink: 0;
 }
 
 .largeButton {
@@ -49,7 +51,13 @@
 }
 
 .search {
-    margin-left: auto;
+    max-width: 238px;
+    width: 100%;
+    flex-shrink: 1;
+    display: flex;
+}
+.form {
+    width: 100%;
 }
 .label {
     color: inherit;
@@ -70,7 +78,7 @@
     }
 }
 .searchInput {
-    width: 238px;
+    width: 100%;
     height: 28px;
     border-radius: 6px;
     border: 0.5px solid var(--history-surface-border-color);

special-pages/pages/history/app/components/SearchForm.js

@@ -43,7 +43,7 @@ export function SearchForm({ term, domain }) {
     }
 
     return (
-        <form role="search" onSubmit={submit}>
+        <form role="search" class={styles.form} onSubmit={submit}>
             <label class={styles.label}>
                 <span class="sr-only">{t('search_your_history')}</span>
                 <span class={styles.searchIcon}>