left_sidebar: Normalize input-wrapper row height.

web/styles/inputs.css

@@ -7,7 +7,13 @@
 .input-element-wrapper {
     display: grid;
     grid-template:
-        [input-element-start] "icon-starting-offset input-icon icon-content-gap content button-content-gap input-button button-ending-offset" auto [input-element-end] / [input-element-start] var(
+        /* We present a variable to set a uniform row height when needed;
+           otherwise, we fall back to the sensible `auto` value. */
+        [input-element-start] "icon-starting-offset input-icon icon-content-gap content button-content-gap input-button button-ending-offset" var(
+            --input-element-row-height,
+            auto
+        )
+        [input-element-end] / [input-element-start] var(
             --input-icon-starting-offset
         )
         var(--input-icon-width) var(--input-icon-content-gap) minmax(0, 1fr)

web/styles/left_sidebar.css

@@ -14,6 +14,22 @@
     text-overflow: ellipsis;
 }
 
+#left-sidebar .input-element-wrapper {
+    /* We normalize this based on Firefox's 31px-tall input,
+       raising Chrome's (28px) and Safari's (30px) to all
+       match, so that `top:` and other offset values are
+       identical relative to input elements. This value
+       is taken up by the grid-template definition in
+       inputs.css. */
+    --input-element-row-height: 1.9375em;
+
+    .input-element {
+        /* And to keep the visual space of the input identical,
+           we stretch to the height of the grid row above. */
+        align-self: stretch;
+    }
+}
+
 #left-sidebar .unread_count {
     user-select: none;
 }