From 7dc739b89a25caad9884a5b8f54f550f82301e52 Mon Sep 17 00:00:00 2001
From: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
Date: Tue, 14 Jul 2026 22:09:38 +0100
Subject: [PATCH] bugfix for not being in a clan on mobile (#4613)

## Description:

fixes a bug that didn't show the join clan popup on mobile

before:
<img width="464" height="534" alt="image"
src="https://github.com/user-attachments/assets/9b7c0e2d-b8e8-4901-ab0e-37768e658722"
/>


after:
<img width="414" height="359" alt="image"
src="https://github.com/user-attachments/assets/9a655f24-7ec1-49c9-938b-8a677cf65ab3"
/>


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

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

w.o.n
---
 src/client/UsernameInput.ts       | 2 +-
 src/client/components/PlayPage.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index be157e8c1..b2a6c1c2d 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -197,7 +197,7 @@ export class UsernameInput extends LitElement {
       tag: this.clanTag,
     });
     const className =
-      "absolute top-full left-0 z-50 mt-1 px-3 py-2 text-sm font-medium border border-red-500/50 rounded-lg bg-red-900/90 text-red-200 backdrop-blur-md shadow-lg whitespace-nowrap";
+      "absolute top-full left-0 z-50 mt-1 px-3 py-2 text-sm font-medium border border-red-500/50 rounded-lg bg-red-900/90 text-red-200 backdrop-blur-md shadow-lg lg:whitespace-nowrap";
 
     if (this.clanTagOwnershipError !== "username.tag_not_member") {
       return html`<div id="clan-tag-validation-error" class=${className}>
diff --git a/src/client/components/PlayPage.ts b/src/client/components/PlayPage.ts
index fff2a0b62..01c73baa6 100644
--- a/src/client/components/PlayPage.ts
+++ b/src/client/components/PlayPage.ts
@@ -115,7 +115,7 @@ export class PlayPage extends LitElement {
 
           <!-- Username: left col -->
           <div
-            class="px-2 py-2 bg-surface border-y border-white/10 overflow-visible lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:relative lg:z-20 lg:border-y-0 lg:rounded-xl"
+            class="px-2 py-2 bg-surface border-y border-white/10 overflow-visible relative z-20 lg:flex lg:items-center lg:gap-x-2 lg:h-[60px] lg:p-3 lg:border-y-0 lg:rounded-xl"
           >
             <div class="flex items-center gap-2 min-w-0 w-full">
               <username-input