nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive user menu styling and improve mobile overflow handling

Browse Source 
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.
This commit is contained in:
nessi
2026-08-01 18:18:34 +02:00
parent 39245b7ee7
commit b0263437e7
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/hooks/useHpGlobalStyles.js
+5
View File
@@ -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; }