Styling changes, avoid glitches even on very small screens.

src/components/HeaderControls.vue

@@ -272,13 +272,13 @@ onBeforeUnmount(() => {
 .header-controls-leave-to {
   opacity: 0;
   max-height: 0;
-  transform: translateY(-20px);
+  transform: translateY(-1rem);
 }
 
 .header-controls-enter-to,
 .header-controls-leave-from {
   opacity: 1;
-  max-height: 100px;
+  max-height: 4rem;
   transform: translateY(0);
 }