From 48460c6282a3ea49c32fa7f9fa673e548e9fd206 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 23:16:20 +0330
Subject: [PATCH] Mobile: redesign TopBar profile chip + trim oversized Home
 actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Profile chip: replace cramped fixed-width (w-[88px]) 3-line stack with a
  clean 2-line layout (name on top; level · xp-bar · % on a flexing row),
  capped at max-w-[46%] so it never crowds the icon group or overflows.
- Hero "Play online" title text-2xl→text-xl on phones (sm:text-2xl), truncate.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/HomeScreen.tsx    |  4 ++--
 src/components/online/TopBar.tsx | 26 ++++++++++++++------------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index 7642ce5..11fe9b7 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -112,10 +112,10 @@ export function HomeScreen() {
               <Play className="size-7" fill="currentColor" />
             </span>
             <span className="flex-1 min-w-0">
-              <span className="block text-2xl font-black text-[#2a1f04] leading-tight">
+              <span className="block text-xl sm:text-2xl font-black text-[#2a1f04] leading-tight truncate">
                 {t("menu.online")}
               </span>
-              <span className="block text-xs text-[#2a1f04]/70">{t("menu.onlineDesc")}</span>
+              <span className="block text-xs text-[#2a1f04]/70 truncate">{t("menu.onlineDesc")}</span>
             </span>
             <Chevron className="size-6 text-[#2a1f04]/70 shrink-0" />
           </motion.button>
diff --git a/src/components/online/TopBar.tsx b/src/components/online/TopBar.tsx
index a3dff52..52335f2 100644
--- a/src/components/online/TopBar.tsx
+++ b/src/components/online/TopBar.tsx
@@ -25,25 +25,27 @@ export function TopBar() {
     <div className="flex items-center justify-between gap-2">
       <button
         onClick={() => go("profile")}
-        className="glass rounded-full ltr:pr-4 rtl:pl-4 ltr:pl-1.5 rtl:pr-1.5 py-1.5 flex items-center gap-2 min-w-0 hover:bg-navy-800/80 transition"
+        className="glass rounded-full ltr:pr-3 rtl:pl-3 ltr:pl-1 rtl:pr-1 py-1 flex items-center gap-2 min-w-0 max-w-[46%] hover:bg-navy-800/80 transition"
       >
         <span className="relative size-9 shrink-0 rounded-full bg-navy-900 gold-border flex items-center justify-center overflow-hidden">
           <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 36 : 26} />
         </span>
-        <span className="text-start leading-tight min-w-0 w-[88px] sm:w-24">
+        <span className="text-start leading-tight min-w-0 flex-1">
           <span className="flex items-center gap-1 text-sm font-bold text-cream truncate">
-            {profile.displayName}
+            <span className="truncate">{profile.displayName}</span>
             {profile.plan === "pro" && <Crown className="size-3 text-gold-400 fill-gold-500 shrink-0" />}
           </span>
-          <span className="flex items-center justify-between text-[10px] text-gold-400/80 mt-0.5">
-            <span>{t("common.level")} {profile.level}</span>
-            <span className="text-cream/40 tabular-nums">{maxed ? "MAX" : `${xpPct}%`}</span>
-          </span>
-          <span className="mt-0.5 block h-1 w-full rounded-full bg-navy-900 overflow-hidden">
-            <span
-              className="block h-full rounded-full bg-gradient-to-r from-gold-500 to-gold-300"
-              style={{ width: `${xpPct}%` }}
-            />
+          <span className="mt-1 flex items-center gap-1.5">
+            <span className="text-[10px] text-gold-400/80 shrink-0 whitespace-nowrap">
+              {t("common.level")} {profile.level}
+            </span>
+            <span className="h-1.5 flex-1 min-w-6 rounded-full bg-navy-900 overflow-hidden">
+              <span
+                className="block h-full rounded-full bg-gradient-to-r from-gold-500 to-gold-300"
+                style={{ width: `${xpPct}%` }}
+              />
+            </span>
+            <span className="text-[9px] text-cream/40 tabular-nums shrink-0">{maxed ? "MAX" : `${xpPct}%`}</span>
           </span>
         </span>
       </button>