Fix mobile logo spacing (#3842)

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>
This commit is contained in:
Aotumuri
2026-05-05 01:16:40 +09:00
committed by GitHub
parent 8ea3426628
commit 1bf7df1b68
+4 -4
View File
@@ -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"