diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
index 09da81c..e1c765f 100644
--- a/src/components/AppLayout.tsx
+++ b/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>
diff --git a/src/styles/theme.css b/src/styles/theme.css
index f843e21..02e0441 100644
--- a/src/styles/theme.css
+++ b/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 */