Keep the sign-out button visible with a long name or email

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/AppLayout.tsx

@@ -187,7 +187,7 @@ export function AppLayout() {
         </div>}
         <div className="profile">
           <span className="avatar" title={collapsed ? name : undefined}>{name.charAt(0).toUpperCase()}</span>
-          <div><b>{name}</b><small>{user?.primaryEmailAddress?.emailAddress}</small></div>
+          <div><b title={name}>{name}</b><small title={user?.primaryEmailAddress?.emailAddress}>{user?.primaryEmailAddress?.emailAddress}</small></div>
           <button className="icon-btn" aria-label={t('layout.signOut')} onClick={() => signOut({ redirectUrl: '/' })}><Icon name="logout" /></button>
         </div>
       </aside>

src/styles/theme.css

@@ -77,8 +77,11 @@ button.workspace:hover,button.workspace[aria-expanded=true]{border-color:var(--s
 .sidebar-help p{font-size:12px}
 .sidebar-help button{color:var(--blue-dark);font-size:12.5px}
 .profile{border-top:1px solid var(--line);padding:14px 4px 0}
+.profile>div{flex:1;min-width:0}
+.profile b,.profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .profile b{font-size:13px}
 .profile small{font-size:11.5px}
+.profile>.icon-btn{flex-shrink:0}
 .avatar{background:linear-gradient(140deg,#2e90fa,#1570ef);color:#fff;width:34px;height:34px;font-weight:700;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(46,144,250,.5);flex-shrink:0}
 
 /* Main column: glass top bar and a soft blue glow at the top */