From ca4648b25a02da7b6888f7bc19a74cf4554a7a9b Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sun, 2 Aug 2026 10:16:56 +0200
Subject: [PATCH] Refactor admin panel with icon-based actions, improved mobile
 layout, and enhanced text truncation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced text action buttons with icon-based buttons (edit ✎, disable ⏻) with tooltips and aria-labels for accessibility. Adjusted admin user grid columns for better space distribution and added text truncation to name/email fields to prevent overflow. Enhanced mobile responsiveness with larger touch targets (36px), reduced editor card padding, and increased input/button heights (40px). Added box
---
 frontend/src/components/AdminPanel.jsx         | 10 ++++------
 frontend/src/styles/hooks/useHpGlobalStyles.js | 12 +++++++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AdminPanel.jsx b/frontend/src/components/AdminPanel.jsx
index fbabf42..eb8afd7 100644
--- a/frontend/src/components/AdminPanel.jsx
+++ b/frontend/src/components/AdminPanel.jsx
@@ -104,7 +104,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
 
   return createPortal(
     <div style={styles.modalOverlay} onMouseDown={onClose}>
-      <div style={{ ...styles.modalCard, width: "min(780px, 100%)", padding: 0 }} onMouseDown={(e) => e.stopPropagation()}>
+      <div className="hp-admin-dashboard-card" style={{ ...styles.modalCard, width: "min(780px, 100%)", padding: 0 }} onMouseDown={(e) => e.stopPropagation()}>
         <div style={{ padding: "18px 18px 16px" }}>
           <div style={styles.modalHeader}>
             <div>
@@ -127,10 +127,8 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
                 <div className="hp-admin-role" style={{ textAlign: "center", fontWeight: 900, color: stylesTokens.textGold }}>{user.role}</div>
                 <div className={`hp-admin-status ${user.disabled ? "hp-admin-status--disabled" : ""}`} style={{ textAlign: "center", opacity: 0.85 }}>{user.disabled ? "disabled" : "active"}</div>
                 <div className="hp-admin-actions">
-                  <button className="hp-admin-action" onClick={() => openEdit(user)} style={{ ...styles.secondaryBtn, padding: "8px 11px" }}>Bearbeiten</button>
-                  <button className="hp-admin-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, padding: "8px 11px", color: "#ffb3b3" }}>
-                    {user.disabled ? "Deaktiviert" : "Deaktivieren"}
-                  </button>
+                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => openEdit(user)} style={styles.secondaryBtn} title="User bearbeiten" aria-label={`${user.display_name || user.email} bearbeiten`}>✎</button>
+                  <button className="hp-admin-action hp-admin-icon-action" onClick={() => disableUser(user)} disabled={user.id === currentUserId || user.disabled} style={{ ...styles.secondaryBtn, color: "#ffb3b3" }} title={user.disabled ? "User ist deaktiviert" : "User deaktivieren"} aria-label={`${user.display_name || user.email} deaktivieren`}>⏻</button>
                 </div>
               </div>
             ))}
@@ -140,7 +138,7 @@ export default function AdminPanel({ open: dashboardOpen = false, onClose, curre
 
       {editorOpen && createPortal(
         <div style={styles.modalOverlay} onMouseDown={closeEditor}>
-          <div style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
+          <div className="hp-admin-editor-card" style={{ ...styles.modalCard, width: "min(470px, 100%)" }} onMouseDown={(e) => e.stopPropagation()}>
             <div style={styles.modalHeader}>
               <div>
                 <div style={{ fontWeight: 1000, color: stylesTokens.textGold, fontSize: 18 }}>{editingUser ? "User bearbeiten" : "Neuen User anlegen"}</div>
diff --git a/frontend/src/styles/hooks/useHpGlobalStyles.js b/frontend/src/styles/hooks/useHpGlobalStyles.js
index 2221474..aff555e 100644
--- a/frontend/src/styles/hooks/useHpGlobalStyles.js
+++ b/frontend/src/styles/hooks/useHpGlobalStyles.js
@@ -80,7 +80,7 @@ export function useHpGlobalStyles() {
         -webkit-overflow-scrolling: touch;
       }
       #root { background: transparent; }
-      * { -webkit-tap-highlight-color: transparent; }
+      *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
       button, input, select { font-family: inherit; }
       button { transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease, background 140ms ease; }
       button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
@@ -105,11 +105,14 @@ export function useHpGlobalStyles() {
       @keyframes hpStartLine { 0%, 100% { opacity: .3; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }
       .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 150px; }
+      .hp-admin-user-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) 62px 62px 78px; white-space: nowrap; }
       .hp-admin-action { min-width: 0; }
       .hp-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
+      .hp-admin-icon-action { width: 34px; height: 34px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
+      .hp-admin-name, .hp-admin-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .hp-admin-check { display: flex; align-items: center; gap: 8px; color: var(--hp-textDim); font-size: 13px; }
       .hp-admin-check input { width: 18px; height: 18px; accent-color: var(--hp-textGold); }
+      .hp-admin-editor-card { overflow: hidden; }
       .hp-admin-role { padding: 4px 8px; border-radius: 999px; background: rgba(233,216,166,0.10); border: 1px solid rgba(233,216,166,0.16); font-size: 12px; }
       .hp-admin-status { color: #baf3c9 !important; font-size: 13px; }
       .hp-admin-status--disabled { color: #ffb3b3 !important; }
@@ -130,7 +133,10 @@ export function useHpGlobalStyles() {
         .hp-admin-role { grid-column: 2; grid-row: 1; }
         .hp-admin-status { grid-column: 2; grid-row: 2; }
         .hp-admin-actions { grid-column: 1 / -1; grid-row: 3; width: 100%; justify-content: flex-end; }
-        .hp-admin-actions .hp-admin-action { width: auto; min-width: 0; min-height: 38px; padding: 7px 10px !important; }
+        .hp-admin-actions .hp-admin-action { width: 36px; min-width: 36px; min-height: 36px; padding: 0 !important; }
+        .hp-admin-editor-card { padding: 14px !important; max-height: calc(100dvh - 20px) !important; }
+        .hp-admin-editor-card input, .hp-admin-editor-card select { min-height: 40px; padding: 8px 10px !important; }
+        .hp-admin-editor-card button { min-height: 40px; }
         .hp-row { grid-template-columns: minmax(0, 1fr) 42px 62px !important; gap: 7px !important; padding: 12px 11px !important; }
         .hp-row button { min-height: 40px; }
         button { min-height: 42px; }