Header: Merge search forms into a single form

Still with two input elements though, due to the different placeholders

Author: Turbo87

.template-lintrc.js

@@ -2,6 +2,4 @@
 
 module.exports = {
   extends: ['octane', 'a11y'],
-
-  pending: [{ moduleId: 'app/components/header', only: ['no-duplicate-landmark-elements'] }],
 };

app/components/header.hbs

@@ -5,12 +5,12 @@
       <h1>crates.io</h1>
     </LinkTo>
 
-    <form local-class="desktop-search-form" action='/search' role="search" {{on "submit" (prevent-default this.search)}} data-test-search-form>
+    <form local-class="search-form" action='/search' role="search" {{on "submit" (prevent-default this.search)}} data-test-search-form>
       {{! template-lint-disable require-input-label}}
       {{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}
       <input
         type="text"
-        local-class="search"
+        local-class="search-input-lg"
         name="q"
         id="cargo-desktop-search"
         placeholder="Click or press 'S' to search..."
@@ -24,6 +24,23 @@
         aria-label="Search"
         data-test-search-input
       >
+
+      {{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
+      <input
+        type="text"
+        local-class="search-input-sm"
+        name="q"
+        placeholder="Search"
+        value={{this.header.searchValue}}
+        oninput={{this.updateSearchValue}}
+        autocorrect="off"
+        required
+        aria-label="Search"
+      >
+
+      {{! Hidden submit button to enable enter-to-submit behavior for form with multiple inputs }}
+      <button type="submit" local-class="submit-button">Submit</button>
+
       {{on-key 's' (focus '#cargo-desktop-search')}}
       {{on-key 'S' (focus '#cargo-desktop-search')}}
       {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
@@ -144,19 +161,5 @@
         </dd.Menu>
       </Dropdown>
     </div>
-
-    <form local-class='mobile-search' action='/search' role="search" {{on "submit" (prevent-default this.search)}}>
-      <input
-        type="text"
-        local-class="search"
-        name="q"
-        placeholder="Search"
-        value={{this.header.searchValue}}
-        oninput={{this.updateSearchValue}}
-        autocorrect="off"
-        required
-        aria-label="Search"
-      >
-    </form>
   </div>
 </header>

app/components/header.module.css

@@ -50,17 +50,12 @@
     margin-right: 10px;
 }
 
-.desktop-search-form {
+.search-form {
     grid-area: search;
     display: flex;
-    flex-grow: 1;
-
-    @media only screen and (max-width: 820px) {
-        display: none;
-    }
 }
 
-input.search {
+.search-input {
     font-size: 90%;
     border: none;
     color: black;
@@ -83,20 +78,28 @@ input.search {
     }
 }
 
-.mobile-search {
-    display: none;
-    grid-area: search;
-    margin: 0 10px 10px;
+.search-input-lg {
+    composes: search-input;
 
-    input.search {
-        margin: 0;
+    @media only screen and (max-width: 820px) {
+        display: none;
     }
+}
+
+.search-input-sm {
+    composes: search-input;
+    display: none;
+    margin: 0 10px 10px;
 
     @media only screen and (max-width: 820px) {
-        display: block;
+        display: unset;
     }
 }
 
+.submit-button {
+    display: none;
+}
+
 .sep {
     margin: 0 10px;
     color: var(--separator-color);