crates: Fix "missing label element" warning

Author: Turbo87

app/styles/crates.module.css

@@ -16,20 +16,28 @@
     a:hover { background-color: var(--main-bg-dark); }
     a:global(.active) { background-color: var(--main-bg-dark); }
 
-    select {
-        display: none;
-        width: 100%;
-        padding: 5px;
-    }
-
     @media only screen and (max-width: 650px) {
         padding: 0;
         background-color: inherit;
         a { display: none; }
-        select { display: block; }
     }
 }
 
+.filter-dropdown-label {
+    display: none;
+
+    @media only screen and (max-width: 650px) {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+}
+
+.filter-dropdown {
+    flex-grow: 1;
+    margin-left: 20px;
+}
+
 .results-meta {
     display: flex;
     align-items: center;

app/templates/crates.hbs

@@ -9,12 +9,16 @@
     </LinkTo>
   {{/each}}
 
-  <select {{on "change" this.handleSelection}}>
-    <option>Filter by the letter...</option>
-    {{#each this.alphabet as |letter|}}
-      <option value={{letter}} selected={{eq letter this.letter}}>{{ letter }}</option>
-    {{/each}}
-  </select>
+  <label local-class="filter-dropdown-label">
+    Filter by letter:
+
+    <select local-class="filter-dropdown" {{on "change" this.handleSelection}}>
+      <option value="">No Filter</option>
+      {{#each this.alphabet as |letter|}}
+        <option value={{letter}} selected={{eq letter this.letter}}>{{ letter }}</option>
+      {{/each}}
+    </select>
+  </label>
 </div>
 
 <div local-class="results-meta">