html/css: fix overlap of top button row on some pages

row with language, light/dark, logout etc. was overlapping with content
on small screens on some pages, as I forgot to bring over changes made
to the admin page. Also improved some other CSS, and factored out the
language menu into html/lang-select.html.

ts/form.ts

@@ -161,6 +161,7 @@ if (window.userExpiryEnabled) {
         messageEl.textContent = window.userExpiryMessage.replace("{date}", toDateString(time));
         setTimeout(calculateTime, 1000);
     };
+    document.addEventListener("timefmt-change", calculateTime)
     calculateTime();
 }
 

ts/modules/lang.ts

@@ -83,7 +83,7 @@ export const loadLangSelector = (page: string) => {
             let innerHTML = '';
             for (let code in req.response) {
                 queryString.set("lang", code);
-                innerHTML += `<a href="?${queryString.toString()}" class="button w-full text-left justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
+                innerHTML += `<a href="?${queryString.toString()}" class="button w-full text-left justify-start ~neutral lang-link">${req.response[code]}</a>`;
                 queryString.delete("lang");
             }
             list.innerHTML = innerHTML;