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/components/TopBar.jsx
+2 -2
View File
@@ -24,7 +24,7 @@ export default function TopBar({
</div> </div>
<div className="hp-topbar-actions" style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu> <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 <button
className="hp-topbar-user" className="hp-topbar-user"
onClick={() => setUserMenuOpen((v) => !v)} onClick={() => setUserMenuOpen((v) => !v)}
@@ -37,7 +37,7 @@ export default function TopBar({
</button> </button>
{userMenuOpen && ( {userMenuOpen && (
<div style={styles.userDropdown}> <div className="hp-user-dropdown" style={styles.userDropdown}>
<div <div
style={{ style={{
padding: "10px 12px", padding: "10px 12px",
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 { 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-row:hover { box-shadow: inset 0 0 0 1px rgba(233,216,166,0.12); }
.hp-topbar-actions { margin-left: auto; } .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-user-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 70px 76px 86px; }
.hp-admin-action { min-width: 0; } .hp-admin-action { min-width: 0; }
@media (max-width: 600px) { @media (max-width: 600px) {
.hp-shell { padding: calc(12px + env(safe-area-inset-top)) 10px calc(28px + env(safe-area-inset-bottom)) !important; } .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 { align-items: flex-start !important; padding: 12px !important; flex-wrap: wrap !important; }
.hp-topbar-actions { width: 100%; margin-left: 0; justify-content: stretch; } .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, .hp-topbar-new { flex: 1; min-height: 44px; }
.hp-topbar-user { width: 100%; }
.hp-topbar-user { justify-content: center; } .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-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-name { grid-column: 1; grid-row: 1; }
.hp-admin-email { grid-column: 1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-admin-email { grid-column: 1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }