Launcher: scrollable command guide, profile tabs fit without scrolling, confirm before removing a friend

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DjMbLQujBHunCCu5GpsHaT

launcher/src/components/PlayerProfileModal.svelte

@@ -30,6 +30,7 @@
   let editBanner = $state('');
   let editAccent = $state('');
   let relationBusy = $state(false);
+  let confirmRemove = $state(false);
   const swatches = ['#8b6cff', '#22d3ee', '#34d399', '#fbbf24', '#fb7185', '#f472b6', '#60a5fa'];
   let savingProfile = $state(false);
 
@@ -215,7 +216,13 @@
         <div class="relation-bar">
           {#if profile.relationship === 'accepted'}
             <button class="sm primary" onclick={message}><MessageSquare size={14} /> Message</button>
-            <button class="sm ghost" disabled={relationBusy} onclick={() => relate('remove')}><UserMinus size={14} /> Remove friend</button>
+            {#if confirmRemove}
+              <span class="tiny muted">Remove {profile.username} from your friends?</span>
+              <button class="sm danger" disabled={relationBusy} onclick={() => { confirmRemove = false; relate('remove'); }}>Yes, remove</button>
+              <button class="sm ghost" onclick={() => (confirmRemove = false)}>Keep</button>
+            {:else}
+              <button class="sm ghost" disabled={relationBusy} onclick={() => (confirmRemove = true)}><UserMinus size={14} /> Remove friend</button>
+            {/if}
           {:else if profile.relationship === 'pending_incoming'}
             <span class="tiny muted">{profile.username} wants to be friends</span>
             <button class="sm primary" disabled={relationBusy} onclick={() => relate('accept')}><UserCheck size={14} /> Accept</button>
@@ -275,19 +282,19 @@
       <!-- Segmented Profile Tabs -->
       <div class="profile-tabs">
         <button class:active={activeTab === 'overview'} onclick={() => (activeTab = 'overview')}>
-          <LayoutGrid size={14} /> Overview
+          <LayoutGrid size={14} /> <span>Overview</span>
         </button>
         <button class:active={activeTab === 'feed'} onclick={() => (activeTab = 'feed')}>
-          <MessageSquare size={14} /> Posts & Feed
+          <MessageSquare size={14} /> <span>Posts</span>
         </button>
         <button class:active={activeTab === 'progression'} onclick={() => (activeTab = 'progression')}>
-          <Award size={14} /> Levels & Ranks
+          <Award size={14} /> <span>Levels</span>
         </button>
         <button class:active={activeTab === 'achievements'} onclick={() => (activeTab = 'achievements')}>
-          <Trophy size={14} /> Achievements ({profile.achievements_count ?? profile.achievements?.length ?? 0})
+          <Trophy size={14} /> <span>Awards {profile.achievements_count ?? profile.achievements?.length ?? 0}</span>
         </button>
         <button class:active={activeTab === 'stats'} onclick={() => (activeTab = 'stats')}>
-          <Swords size={14} /> Stats
+          <Swords size={14} /> <span>Stats</span>
         </button>
       </div>
 
@@ -538,7 +545,7 @@
   }
   .profile-modal {
     width: 100%;
-    max-width: 36rem;
+    max-width: 38rem;
     max-height: calc(100vh - 4rem);
     overflow-y: auto;
     background: var(--surface);
@@ -661,21 +668,24 @@
     font-size: 0.72rem;
   }
   .profile-tabs {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     border-bottom: 1px solid var(--line);
     background: color-mix(in srgb, var(--surface) 90%, black);
-    padding: 0 1rem;
-    gap: 0.3rem;
+    padding: 0 0.5rem;
+    gap: 0.15rem;
   }
   .profile-tabs button {
     display: flex;
     align-items: center;
-    gap: 0.35rem;
+    justify-content: center;
+    min-width: 0;
+    gap: 0.3rem;
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
-    padding: 0.65rem 0.9rem;
-    font-size: 0.82rem;
+    padding: 0.65rem 0.25rem;
+    font-size: 0.8rem;
     font-weight: 560;
     color: var(--muted);
     border-radius: 0;
@@ -685,8 +695,10 @@
     color: var(--text);
     border-bottom-color: var(--pa, var(--accent));
   }
-  .profile-tabs { overflow-x: auto; }
   .profile-tabs button { white-space: nowrap; }
+  .profile-tabs button span { overflow: hidden; text-overflow: ellipsis; }
+  .profile-tabs button :global(svg) { flex-shrink: 0; }
+  @media (max-width: 34rem) { .profile-tabs button :global(svg) { display: none; } }
   .presence { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--muted) 60%, transparent); }
   .presence.on { background: #34d399; box-shadow: 0 0 0 3px color-mix(in srgb, #34d399 25%, transparent); }
   .chips-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }