fix: Set width:auto so the logo is not stretched by its own attributes

The previous commit did not fix this and the reasoning behind it was wrong.
width/height attributes are presentational hints that set a real width, not
merely an aspect-ratio hint. The rule sets height:22px and never width, so the
attribute's 199px won over auto and the logo was drawn 199x22 instead of
145.92x22 -- stretched by 36%. Removing the padding in the previous commit made
it worse, because the padding had been accidentally shaving 20px off that 199.

width:auto hands sizing back to the aspect ratio the attributes imply. Measured
over CDP against the built stylesheet: content box 145.92x22 and -0.01%
distortion, identical to production. With the image request blocked the box is
still 145.92x22, so the space really is reserved before the image arrives, which
is the point of the change.

The margin-right from the previous commit stays: aspect-ratio sizes the
border box, so padding would still be counted inside the ratio.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: lfrancke

ui/src/css/header.css

@@ -43,12 +43,20 @@ body {
   word-wrap: normal;
 }
 
-/* The gap to the right of the logo is a margin, not padding, on purpose: the
- * width/height attributes on the img give it an aspect-ratio, and aspect-ratio
- * sizes the box named by box-sizing -- which is border-box here, so padding
- * would be counted inside the ratio and squash the image by exactly that much. */
+/* The img carries width/height attributes so its space is reserved before it
+ * loads. Two consequences to keep in mind when touching this rule:
+ *
+ * width: auto is required, not redundant. Those attributes are presentational
+ * hints that set a real width, so without it the logo renders at its full 199px
+ * against a 22px height and stretches by a third. Setting it hands sizing back
+ * to the aspect ratio the attributes imply.
+ *
+ * The gap is a margin, not padding, because aspect-ratio sizes the box named by
+ * box-sizing -- border-box here -- so padding would count inside the ratio and
+ * squash the image by exactly that much. */
 .navbar-brand .navbar-item:first-child img {
   height: 22px;
+  width: auto;
   display: inline-block;
   margin-top: -4px;
   margin-right: 20px;