Tighten Users filters and admin-only header badges.

Match sticky headers to sidebar glass, drop the Users role column, and show compact owner/admin badges only where needed.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/ChangeUserAccessModal.module.css

@@ -77,11 +77,12 @@
 
 .roleBadge {
   display: inline-block;
-  margin-top: 4px;
-  padding: 2px 8px;
+  margin-top: 2px;
+  padding: 0 5px;
   border-radius: 999px;
-  font-size: 11px;
+  font-size: 9px;
   font-weight: 600;
+  line-height: 1.5;
   color: var(--primary);
   background: rgba(var(--primary-rgb) / 0.1);
   border: 1px solid rgba(var(--primary-rgb) / 0.18);

apps/business/src/components/Header.module.css

@@ -6,11 +6,11 @@
   position: sticky;
   top: 0;
   z-index: 50;
-  background: color-mix(in srgb, #ffffff 42%, transparent);
-  backdrop-filter: saturate(180%) blur(var(--blur-glass, 28px));
-  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-glass, 28px));
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--glass-border);
-  /* Keep sticky header on its own compositor layer so backdrop blur samples content beneath */
+  isolation: isolate;
   transform: translateZ(0);
 }
 
@@ -112,9 +112,19 @@
   line-height: 1.2;
 }
 
-.role {
-  font-size: 12px;
-  color: var(--text-muted);
+.roleBadge {
+  display: inline-block;
+  margin-top: 2px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--primary);
+  background: rgba(var(--primary-rgb) / 0.1);
+  border: 1px solid rgba(var(--primary-rgb) / 0.18);
+  font-family: var(--font-ui);
+  width: fit-content;
 }
 
 .chevron {

apps/business/src/components/Header.tsx

@@ -4,6 +4,7 @@ import { Menu, Bell, MessageSquare, ChevronDown, User, Settings, KeyRound, LogOu
 import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
 import { useT } from '../i18n/useT'
+import { getActiveBusinessId } from '../lib/businessContext'
 import { changePassword } from '../services/authService'
 import styles from './Header.module.css'
 
@@ -40,13 +41,16 @@ export function Header() {
   const menuRef = useRef<HTMLDivElement>(null)
 
   const displayName = displayUserName(user, locale, t('app.userFallback'))
-  const roleLabel =
-    user?.roleLabel ??
-    (user?.isSuperAdmin || user?.roles.includes('super_admin')
-      ? t('role.superAdmin')
-      : user?.businesses[0]?.isOwner
-        ? t('role.owner')
-        : user?.businesses[0]?.teamRole ?? t('role.staff'))
+  const isSuperAdmin = Boolean(user?.isSuperAdmin || user?.roles.includes('super_admin'))
+  const activeBusinessId = getActiveBusinessId()
+  const membership =
+    user?.businesses.find((b) => String(b.id) === String(activeBusinessId)) ??
+    user?.businesses[0]
+  const adminBadgeLabel = isSuperAdmin
+    ? t('role.superAdmin')
+    : membership?.teamRole === 'admin'
+      ? t('role.admin')
+      : null
 
   useEffect(() => {
     if (!menuOpen) return
@@ -112,7 +116,9 @@ export function Header() {
             >
               <div className={styles.profileInfo}>
                 <span className={styles.name}>{displayName}</span>
-                <span className={styles.role}>{roleLabel}</span>
+                {adminBadgeLabel ? (
+                  <span className={styles.roleBadge}>{adminBadgeLabel}</span>
+                ) : null}
               </div>
               <ChevronDown
                 size={16}

apps/business/src/components/ListFiltersPanel.module.css

@@ -41,6 +41,18 @@
   align-self: center;
 }
 
+.filterActionsCol1 {
+  grid-column: span 1;
+  justify-content: flex-start;
+  gap: 6px;
+}
+
+.filterSpacerCol4 {
+  grid-column: span 4;
+  min-width: 0;
+  pointer-events: none;
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -56,6 +68,10 @@
   min-width: 88px;
 }
 
+.fieldCol1 {
+  grid-column: span 1;
+}
+
 .fieldCol3 {
   grid-column: span 3;
 }
@@ -64,6 +80,10 @@
   grid-column: span 4;
 }
 
+.fieldCol8 {
+  grid-column: span 8;
+}
+
 .field label {
   font-size: 12px;
   font-weight: 500;
@@ -187,9 +207,20 @@
     justify-content: flex-end;
   }
 
+  .filterActionsCol1 {
+    grid-column: span 12;
+    justify-content: flex-end;
+  }
+
+  .filterSpacerCol4 {
+    display: none;
+  }
+
+  .fieldCol1,
   .fieldCol2,
   .fieldCol3,
-  .fieldCol4 {
+  .fieldCol4,
+  .fieldCol8 {
     grid-column: span 6;
   }
 }
@@ -199,9 +230,11 @@
     grid-template-columns: 1fr;
   }
 
+  .fieldCol1,
   .fieldCol2,
   .fieldCol3,
-  .fieldCol4 {
+  .fieldCol4,
+  .fieldCol8 {
     grid-column: span 1;
   }
 }