Ensure inputs have the same height

Refs #1742, https://moderncss.dev/custom-select-styles-with-pure-css/

assets/style.css

@@ -1370,22 +1370,57 @@ notification-banner {
   }
 }
 
-select {
+.select {
+  display: grid;
+  grid-template-areas: 'select';
+  align-items: center;
   max-inline-size: 100%;
   padding-block: var(--space-3xs);
   padding-inline: var(--space-2xs);
   border: var(--width-divider) solid currentcolor;
-  border-radius: 0;
   background-color: var(--color-background);
-  color: inherit;
-  font: inherit;
 
-  &:not([hidden]) {
-    display: block;
+  &:focus-within {
+    @media screen {
+      outline: var(--color-focus) solid var(--width-divider);
+      outline-offset: 0;
+
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+    }
   }
 
-  &:focus-visible {
-    outline-offset: 0;
+  & > select {
+    z-index: 1;
+    grid-area: select;
+    inline-size: 100%;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: 0 calc(var(--space-2xs) + 0.8em);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: inherit;
+    appearance: none;
+  }
+
+  &::after {
+    content: '';
+    grid-area: select;
+    justify-self: end;
+    block-size: 0.5em;
+    inline-size: 0.8em;
+    background-color: currentcolor;
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+
+    @media screen {
+      @media (forced-colors: active) {
+        background-color: CanvasText;
+      }
+    }
   }
 
   label + & {

src/review-requests-page/review-requests-page.ts

@@ -155,30 +155,34 @@ const form = ({ field, language }: Pick<ReviewRequests, 'field' | 'language'>) =
     <input type="hidden" name="page" value="1" />
     <div>
       <label for="language">Language</label>
-      <select name="language" id="language">
-        <option value="" ${language === undefined ? html`selected` : ''}>Any</option>
-        ${pipe(
-          ['en', 'pt', 'es'] satisfies ReadonlyArray<LanguageCode>,
-          RA.map(language => [language, iso6391.getName(language)] as const),
-          RA.sort(Ord.contramap(snd)(ordString('en'))),
-          RA.map(
-            ([code, name]) =>
-              html` <option value="${code}" ${code === language ? html`selected` : ''}>${name}</option>`,
-          ),
-        )}
-      </select>
+      <div class="select">
+        <select name="language" id="language">
+          <option value="" ${language === undefined ? html`selected` : ''}>Any</option>
+          ${pipe(
+            ['en', 'pt', 'es'] satisfies ReadonlyArray<LanguageCode>,
+            RA.map(language => [language, iso6391.getName(language)] as const),
+            RA.sort(Ord.contramap(snd)(ordString('en'))),
+            RA.map(
+              ([code, name]) =>
+                html` <option value="${code}" ${code === language ? html`selected` : ''}>${name}</option>`,
+            ),
+          )}
+        </select>
+      </div>
     </div>
     <div>
       <label for="field">Field</label>
-      <select name="field" id="field">
-        <option value="" ${field === undefined ? html`selected` : ''}>Any</option>
-        ${pipe(
-          fieldIds,
-          RA.map(field => [field, getFieldName(field)] satisfies [FieldId, string]),
-          RA.sort(Ord.contramap(snd)(ordString('en'))),
-          RA.map(([id, name]) => html` <option value="${id}" ${id === field ? html`selected` : ''}>${name}</option>`),
-        )}
-      </select>
+      <div class="select">
+        <select name="field" id="field">
+          <option value="" ${field === undefined ? html`selected` : ''}>Any</option>
+          ${pipe(
+            fieldIds,
+            RA.map(field => [field, getFieldName(field)] satisfies [FieldId, string]),
+            RA.sort(Ord.contramap(snd)(ordString('en'))),
+            RA.map(([id, name]) => html` <option value="${id}" ${id === field ? html`selected` : ''}>${name}</option>`),
+          )}
+        </select>
+      </div>
     </div>
     <button>Filter results</button>
   </form>

src/reviews-page/reviews-page.ts

@@ -174,30 +174,34 @@ const form = ({
         : ''}
     <div>
       <label for="language">Language</label>
-      <select name="language" id="language">
-        <option value="" ${language === undefined ? html`selected` : ''}>Any</option>
-        ${pipe(
-          ['en', 'pt', 'es'] satisfies ReadonlyArray<LanguageCode>,
-          RA.map(language => [language, iso6391.getName(language)] as const),
-          RA.sort(Ord.contramap(snd)(ordString('en'))),
-          RA.map(
-            ([code, name]) =>
-              html` <option value="${code}" ${code === language ? html`selected` : ''}>${name}</option>`,
-          ),
-        )}
-      </select>
+      <div class="select">
+        <select name="language" id="language">
+          <option value="" ${language === undefined ? html`selected` : ''}>Any</option>
+          ${pipe(
+            ['en', 'pt', 'es'] satisfies ReadonlyArray<LanguageCode>,
+            RA.map(language => [language, iso6391.getName(language)] as const),
+            RA.sort(Ord.contramap(snd)(ordString('en'))),
+            RA.map(
+              ([code, name]) =>
+                html` <option value="${code}" ${code === language ? html`selected` : ''}>${name}</option>`,
+            ),
+          )}
+        </select>
+      </div>
     </div>
     <div>
       <label for="field">Field</label>
-      <select name="field" id="field">
-        <option value="" ${field === undefined ? html`selected` : ''}>Any</option>
-        ${pipe(
-          fieldIds,
-          RA.map(field => [field, getFieldName(field)] satisfies [FieldId, string]),
-          RA.sort(Ord.contramap(snd)(ordString('en'))),
-          RA.map(([id, name]) => html` <option value="${id}" ${id === field ? html`selected` : ''}>${name}</option>`),
-        )}
-      </select>
+      <div class="select">
+        <select name="field" id="field">
+          <option value="" ${field === undefined ? html`selected` : ''}>Any</option>
+          ${pipe(
+            fieldIds,
+            RA.map(field => [field, getFieldName(field)] satisfies [FieldId, string]),
+            RA.sort(Ord.contramap(snd)(ordString('en'))),
+            RA.map(([id, name]) => html` <option value="${id}" ${id === field ? html`selected` : ''}>${name}</option>`),
+          )}
+        </select>
+      </div>
     </div>
     <button>Filter results</button>
   </form>