Add responsive user menu styling and improve mobile overflow handling

Enhanced TopBar user menu with CSS classes for targeted styling. Implemented responsive dropdown positioning and sizing for mobile devices with proper viewport constraints. Added text overflow handling for long usernames and emails, improved flex layout behavior, and ensured touch-friendly button sizing on narrow screens.

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",

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; }