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>