UI refinements (#2859)

## Description:

UI Refinements requested by @evanpelle  check https://ui.openfront.dev

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

src/client/components/MainLayout.ts

@@ -0,0 +1,32 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("main-layout")
+export class MainLayout extends LitElement {
+  private _initialChildren: Node[] = [];
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    if (this._initialChildren.length === 0 && this.childNodes.length > 0) {
+      this._initialChildren = Array.from(this.childNodes);
+    }
+    super.connectedCallback();
+  }
+
+  render() {
+    return html`
+      <main
+        class="relative [.in-game_&]:hidden flex flex-col flex-1 overflow-hidden w-full px-[clamp(1.5rem,3vw,3rem)] pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-[clamp(0.75rem,1.5vw,1.5rem)]"
+      >
+        <div
+          class="w-full max-w-[20cm] mx-auto flex flex-col flex-1 gap-[clamp(1.5rem,3vw,3rem)] overflow-y-auto overflow-x-hidden [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden lg:[scrollbar-width:auto] lg:[-ms-overflow-style:auto] lg:[&::-webkit-scrollbar]:block"
+        >
+          ${this._initialChildren}
+        </div>
+      </main>
+    `;
+  }
+}