From 29b410eefc03b7751bd5e00bba8668f2e1b56606 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 07:55:08 +0330
Subject: [PATCH] Mobile sweep: fix matchmaking slot overflow + profile avatar
 picker art
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MatchmakingScreen: the 4 fixed w-16 slots (~292px) overflowed 320px phones;
  now grid-fluid (w-full, gap-2 sm:gap-3, max-w-xs) so they always fit.
- ProfileScreen avatar picker now renders <Avatar id> (god/legend medallions)
  instead of raw emoji — consistent with the displayed avatar and shop.

Swept Achievements/Leaderboard/BuyCoins/Auth/Shop/Profile/Lobby/Room — already
responsive (ScreenShell + min-w-0/truncate/shrink-0 throughout); no other
overflow found.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/screens/MatchmakingScreen.tsx | 4 ++--
 src/components/screens/ProfileScreen.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/screens/MatchmakingScreen.tsx b/src/components/screens/MatchmakingScreen.tsx
index 6860ad5..df781f5 100644
--- a/src/components/screens/MatchmakingScreen.tsx
+++ b/src/components/screens/MatchmakingScreen.tsx
@@ -126,14 +126,14 @@ export function MatchmakingScreen() {
           </>
         )}
 
-        <div className="grid grid-cols-4 gap-3 mt-8">
+        <div className="grid grid-cols-4 gap-2 sm:gap-3 mt-8 w-full max-w-xs">
           {slots.map((i) => {
             const p = mm.players[i];
             return (
               <div
                 key={i}
                 className={
-                  "w-16 h-20 rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
+                  "h-20 w-full rounded-2xl flex flex-col items-center justify-center gap-1 transition " +
                   (p ? "glass gold-border" : "border border-dashed border-navy-700/60 bg-navy-900/30")
                 }
               >
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index 141fe55..80e5c68 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -174,11 +174,11 @@ export function ProfileScreen() {
               key={a.id}
               onClick={() => updateProfile({ avatar: a.id })}
               className={cn(
-                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition",
+                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
                 profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
               )}
             >
-              {a.emoji}
+              <Avatar id={a.id} size={40} />
             </button>
           ))}
         </div>