diff --git a/frontend/src/components/TopBar.jsx b/frontend/src/components/TopBar.jsx
index c1ee996..b0bfcb7 100644
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -24,7 +24,7 @@ export default function TopBar({
       </div>
 
       <div className="hp-topbar-actions" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
-        <div style={{ position: "relative" }}>
+        <div className="hp-user-menu-wrap" style={{ position: "relative" }}>
           <button
             className="hp-topbar-user"
             onClick={() => setUserMenuOpen((v) => !v)}
@@ -37,7 +37,7 @@ export default function TopBar({
           </button>
 
           {userMenuOpen && (
-            <div style={styles.userDropdown}>
+            <div className="hp-user-dropdown" style={styles.userDropdown}>
               <div
                 style={{
                   padding: "10px 12px",
diff --git a/frontend/src/styles/hooks/useHpGlobalStyles.js b/frontend/src/styles/hooks/useHpGlobalStyles.js
index 61315c7..3f5114c 100644
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -90,14 +90,19 @@ export function useHpGlobalStyles() {
       .hp-row { transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
       .hp-row:hover { box-shadow: inset 0 0 0 1px rgba(233,216,166,0.12); }
       .hp-topbar-actions { margin-left: auto; }
+      .hp-user-menu-wrap { min-width: 0; }
       .hp-admin-user-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 70px 76px 86px; }
       .hp-admin-action { min-width: 0; }
       @media (max-width: 600px) {
         .hp-shell { padding: calc(12px + env(safe-area-inset-top)) 10px calc(28px + env(safe-area-inset-bottom)) !important; }
         .hp-topbar { align-items: flex-start !important; padding: 12px !important; flex-wrap: wrap !important; }
         .hp-topbar-actions { width: 100%; margin-left: 0; justify-content: stretch; }
+        .hp-user-menu-wrap { flex: 1; min-width: 0; }
         .hp-topbar-user, .hp-topbar-new { flex: 1; min-height: 44px; }
+        .hp-topbar-user { width: 100%; }
         .hp-topbar-user { justify-content: center; }
+        .hp-user-dropdown { left: 0 !important; right: auto !important; width: max-content; max-width: calc(100vw - 20px); min-width: min(220px, calc(100vw - 20px)) !important; }
+        .hp-user-dropdown > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
         .hp-admin-user-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 11px !important; }
         .hp-admin-name { grid-column: 1; grid-row: 1; }
         .hp-admin-email { grid-column: 1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }