From b0263437e7ad2363e6d0617023ba576fe5abcee6 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 1 Aug 2026 18:18:34 +0200
Subject: [PATCH] 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             | 4 ++--
 frontend/src/styles/hooks/useHpGlobalStyles.js | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

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