From 1bf7df1b68deb4300ec5a78204f1e63390e17d7c Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Tue, 5 May 2026 01:16:40 +0900
Subject: [PATCH] Fix mobile logo spacing (#3842)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves
#https://discord.com/channels/1359946986937258015/1381347989464809664/1500830892405424168

## Description:
Fixes a mobile layout issue where a large gap appeared below the
OpenFront logo, causing fewer menu options to be visible without
scrolling.

before
<img width="591" height="910" alt="スクリーンショット 2026-05-04 21 32 32"
src="https://github.com/user-attachments/assets/7d9de0de-8d19-4e54-bec6-2bc3b9dda6a5"
/>

after
<img width="603" height="1311" alt="OpenFront (ALPHA)"
src="https://github.com/user-attachments/assets/e606feee-0f33-4a8c-b100-514005a0d2aa"
/>


## 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:

aotumuri

Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
---
 src/client/components/MobileNavBar.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/components/MobileNavBar.ts b/src/client/components/MobileNavBar.ts
index aeaeb6722..deb0a034f 100644
--- a/src/client/components/MobileNavBar.ts
+++ b/src/client/components/MobileNavBar.ts
@@ -69,17 +69,17 @@ export class MobileNavBar extends LitElement {
       ></div>
 
       <div
-        class="flex-1 w-full flex flex-col justify-start overflow-y-auto lg:pt-[clamp(1rem,3vh,4rem)] lg:pb-[clamp(0.5rem,2vh,2rem)] lg:px-[clamp(1rem,1.5vw,2rem)] p-5 gap-[clamp(1rem,3vh,3rem)]"
+        class="flex-1 w-full flex flex-col justify-start overflow-y-auto lg:pt-[clamp(1rem,3vh,4rem)] lg:pb-[clamp(0.5rem,2vh,2rem)] lg:px-[clamp(1rem,1.5vw,2rem)] pt-4 pb-4 px-5 gap-4 lg:gap-[clamp(1rem,3vh,3rem)]"
       >
         <!-- Logo + Menu -->
         <div
-          class="flex flex-col text-malibu-blue mb-[clamp(1rem,2vh,2rem)] ml-[clamp(0.2rem,0.4vw,0.4vh)]"
+          class="flex flex-col text-malibu-blue mb-4 ml-[clamp(0.2rem,0.4vw,0.4vh)]"
         >
-          <div class="flex flex-col items-center gap-2">
+          <div class="flex flex-col items-center gap-1">
             <img
               src=${assetUrl("images/OpenFrontLogo.svg")}
               alt="OpenFront"
-              class="h-full w-auto"
+              class="w-auto h-auto max-w-[220px] max-h-[4.5rem]"
             />
             <div
               id="game-version"