@micha.bigler/ui-core-micha 2.35.0 → 2.36.0

package/tests/AccountPage.test.jsx

@@ -0,0 +1,193 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key, fallback) => ({
+      'Account.TITLE': 'Account & Administration',
+      'Account.PAGE_TITLE': 'Account',
+      'Account.TAB_PROFILE': 'Profile',
+      'Account.TAB_SECURITY': 'Security',
+      'Account.TAB_USERS': 'Users',
+      'Account.TAB_INVITE': 'Invite',
+      'Account.TAB_SUPPORT': 'Support',
+      'Account.GROUP_MY_ACCOUNT': 'My account',
+      'Account.GROUP_MANAGEMENT': 'Management',
+      'Account.GROUP_HELP': 'Help',
+      'Account.GROUP_MORE': 'More',
+      'SectionNav.TITLE': 'Switch section',
+      'SectionNav.TRIGGER_EYEBROW': 'Section',
+      'SectionNav.LAST_OPENED': 'Last opened',
+    }[key] ?? fallback ?? key),
+  }),
+}));
+
+vi.mock('../src/auth/authApi', () => ({
+  fetchAuthPolicy: vi.fn(() => new Promise(() => {})),
+  updateUserProfile: vi.fn(),
+}));
+
+vi.mock('../src/components/ProfileComponent', () => ({
+  ProfileComponent: () => <div>Profile content</div>,
+}));
+vi.mock('../src/components/SecurityComponent', () => ({
+  SecurityComponent: () => <div>Security content</div>,
+}));
+vi.mock('../src/components/UserListComponent', () => ({
+  UserListComponent: () => <div>Users content</div>,
+}));
+vi.mock('../src/components/UserInviteComponent', () => ({ UserInviteComponent: () => null }));
+vi.mock('../src/components/AccessCodeManager', () => ({ AccessCodeManager: () => null }));
+vi.mock('../src/components/AllowedEmailDomainsManager', () => ({ AllowedEmailDomainsManager: () => null }));
+vi.mock('../src/components/RegistrationMethodsManager', () => ({ RegistrationMethodsManager: () => null }));
+vi.mock('../src/components/AuthFactorRequirementCard', () => ({ AuthFactorRequirementCard: () => null }));
+vi.mock('../src/components/AccessCodeSingleUseToggle', () => ({ AccessCodeSingleUseToggle: () => null }));
+vi.mock('../src/components/QrSignupManager', () => ({ QrSignupManager: () => null }));
+vi.mock('../src/components/QrSignupValidityManager', () => ({ QrSignupValidityManager: () => null }));
+vi.mock('../src/components/SupportRecoveryRequestsTab', () => ({
+  SupportRecoveryRequestsTab: () => <div>Support content</div>,
+}));
+vi.mock('../src/components/BulkInviteCsvTab', () => ({ BulkInviteCsvTab: () => null }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { AccountPage } from '../src/pages/AccountPage';
+
+const theme = createTheme();
+const superuser = {
+  email: 'admin@example.com',
+  is_superuser: true,
+  ui_permissions: {},
+  available_roles: [],
+};
+const notificationsTab = {
+  value: 'notifications',
+  label: 'Notifications',
+  render: () => <div>Notifications content</div>,
+};
+
+function setViewportWidth(width) {
+  window.matchMedia = vi.fn().mockImplementation((query) => {
+    const maxWidth = query.match(/max-width:(\d+(?:\.\d+)?)px/)?.[1];
+    const minWidth = query.match(/min-width:(\d+(?:\.\d+)?)px/)?.[1];
+    const matches = maxWidth
+      ? width <= Number(maxWidth)
+      : minWidth
+        ? width >= Number(minWidth)
+        : false;
+    return {
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    };
+  });
+}
+
+function LocationProbe() {
+  const location = useLocation();
+  return <output data-testid="location-search">{location.search}</output>;
+}
+
+function renderAccount({ user = superuser, route = '/account', extraTabs = [notificationsTab] } = {}) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, login: vi.fn(), loading: false }}>
+        <MemoryRouter initialEntries={[route]}>
+          <Routes>
+            <Route
+              path="/account"
+              element={(
+                <>
+                  <AccountPage extraTabs={extraTabs} />
+                  <LocationProbe />
+                </>
+              )}
+            />
+          </Routes>
+        </MemoryRouter>
+      </AuthContext.Provider>
+    </ThemeProvider>,
+  );
+}
+
+describe('AccountPage section navigation', () => {
+  beforeEach(() => setViewportWidth(375));
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('makes all six cockpit-shaped sections reachable at 375px without a horizontal strip', () => {
+    const { container } = renderAccount();
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+
+    expect(container.querySelector('.MuiTabs-root')).toBeNull();
+    expect(getComputedStyle(trigger).width).toBe('100%');
+    fireEvent.click(trigger);
+
+    const sectionButtons = ['Profile', 'Security', 'Users', 'Invite', 'Support', 'Notifications']
+      .map((label) => screen.getByRole('button', { name: label }));
+    expect(sectionButtons).toHaveLength(6);
+    sectionButtons.forEach((item) => {
+      expect(getComputedStyle(item).position).not.toBe('absolute');
+    });
+    expect(document.documentElement.scrollWidth - document.documentElement.clientWidth).toBe(0);
+  });
+
+  it('keeps the ?tab= contract and updates it when a drawer item is selected', () => {
+    renderAccount({ route: '/account?tab=notifications' });
+
+    expect(screen.getByText('Notifications content')).toBeTruthy();
+    const trigger = screen.getByRole('button', { name: /Section Notifications/i });
+    fireEvent.click(trigger);
+    fireEvent.click(screen.getByRole('button', { name: 'Security' }));
+
+    expect(screen.getByText('Security content')).toBeTruthy();
+    expect(screen.getByTestId('location-search').textContent).toBe('?tab=security');
+  });
+
+  it('keeps permission-gated sections absent and falls an unpermitted query back to profile', () => {
+    renderAccount({
+      user: {
+        email: 'person@example.com',
+        is_superuser: false,
+        ui_permissions: {},
+        available_roles: [],
+      },
+      route: '/account?tab=users',
+      extraTabs: [],
+    });
+
+    expect(screen.getByText('Profile content')).toBeTruthy();
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+    fireEvent.click(trigger);
+    expect(screen.getByRole('button', { name: 'Profile' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Security' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Users' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Invite' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Support' })).toBeNull();
+    expect(screen.queryByText('Management')).toBeNull();
+    expect(screen.queryByText('Help')).toBeNull();
+    expect(screen.queryByText('More')).toBeNull();
+  });
+
+  it('uses the desktop grouped grid at 1280px with no tab strip left behind', () => {
+    setViewportWidth(1280);
+    const { container } = renderAccount();
+    const grid = container.querySelector('[data-section-nav-mode="desktop"]');
+
+    expect(grid).toBeTruthy();
+    expect(getComputedStyle(grid).gridTemplateColumns).toBe('280px minmax(0, 1fr)');
+    expect(container.querySelector('.MuiTabs-root')).toBeNull();
+    expect(container.querySelector('nav')).toBeTruthy();
+  });
+});

package/tests/SectionNav.test.jsx

@@ -0,0 +1,274 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const translation = vi.hoisted(() => ({
+  t: vi.fn((key) => ({
+    'SectionNav.TITLE': 'Switch section',
+    'SectionNav.TRIGGER_EYEBROW': 'Section',
+    'SectionNav.LAST_OPENED': 'Last opened',
+  }[key] ?? key)),
+}));
+
+vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
+
+import {
+  SECTION_NAV_DRAWER_PAPER_SX,
+  SectionNav,
+} from '../src/layout/SectionNav';
+import { sectionNavTranslations } from '../src/i18n/sectionNavTranslations';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const groups = [
+  {
+    key: 'account',
+    label: 'My account',
+    items: [
+      { key: 'profile', label: 'Profile' },
+      { key: 'security', label: 'Security' },
+    ],
+  },
+  {
+    key: 'management',
+    label: 'Management',
+    items: [
+      { key: 'users', label: 'Users' },
+      { key: 'invite', label: 'Invite' },
+    ],
+  },
+  {
+    key: 'help',
+    label: 'Help',
+    items: [{ key: 'support', label: 'Support' }],
+  },
+  {
+    key: 'more',
+    label: 'More',
+    items: [{ key: 'notifications', label: 'Notifications' }],
+  },
+];
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+function renderNav(props = {}, currentTheme = theme) {
+  return render(
+    <ThemeProvider theme={currentTheme}>
+      <SectionNav
+        mode="desktop"
+        groups={groups}
+        activeKey="profile"
+        onSelect={vi.fn()}
+        {...props}
+      >
+        <div data-testid="section-content">Section content</div>
+      </SectionNav>
+    </ThemeProvider>,
+  );
+}
+
+describe('SectionNav', () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('renders finished group and item labels in order, one section per item', () => {
+    renderNav();
+
+    expect(screen.getAllByRole('button').map((item) => item.textContent)).toEqual([
+      'Profile',
+      'Security',
+      'Users',
+      'Invite',
+      'Support',
+      'Notifications',
+    ]);
+    expect(screen.getAllByText(/My account|Management|Help|More/).map((item) => item.textContent))
+      .toEqual(['My account', 'Management', 'Help', 'More']);
+  });
+
+  it('selects exactly the matching item, tolerates no match, and selects an optional overview for null', () => {
+    const { rerender } = renderNav({ activeKey: 'users', overviewItem: { label: 'Overview' } });
+    const selected = () => screen.getAllByRole('button')
+      .filter((item) => item.classList.contains('Mui-selected'));
+
+    expect(selected()).toHaveLength(1);
+    expect(selected()[0].textContent).toBe('Users');
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <SectionNav
+          mode="desktop"
+          groups={groups}
+          activeKey="missing"
+          overviewItem={{ label: 'Overview' }}
+          onSelect={vi.fn()}
+        />
+      </ThemeProvider>,
+    );
+    expect(selected()).toHaveLength(0);
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <SectionNav
+          mode="desktop"
+          groups={groups}
+          activeKey={null}
+          overviewItem={{ label: 'Overview' }}
+          onSelect={vi.fn()}
+        />
+      </ThemeProvider>,
+    );
+    expect(selected()).toHaveLength(1);
+    expect(selected()[0].textContent).toBe('Overview');
+  });
+
+  it('omits overview and remembered UI completely when those props are absent', () => {
+    const { container } = renderNav();
+
+    expect(screen.queryByText('Overview')).toBeNull();
+    expect(screen.queryByText('Last opened')).toBeNull();
+    expect(container.querySelectorAll('.MuiPaper-root')).toHaveLength(groups.length);
+  });
+
+  it('shows the remembered secondary line only on its unselected item', () => {
+    renderNav({ activeKey: 'profile', rememberedKey: 'security' });
+    expect(screen.getByText('Last opened')).toBeTruthy();
+
+    cleanup();
+    renderNav({ activeKey: 'security', rememberedKey: 'security' });
+    expect(screen.queryByText('Last opened')).toBeNull();
+  });
+
+  it('calls onSelect with the item key and closes the uncontrolled drawer', async () => {
+    const onSelect = vi.fn();
+    renderNav({ mode: 'mobile', onSelect });
+
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    fireEvent.click(trigger);
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Security' }));
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(onSelect).toHaveBeenCalledWith('security');
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Security' })).toBeNull());
+  });
+
+  it('defers to the caller in controlled mode: the trigger calls onOpen, not internal state', () => {
+    const onOpen = vi.fn();
+    const onClose = vi.fn();
+    const { rerender } = renderNav({ mode: 'mobile', open: false, onOpen, onClose });
+
+    const trigger = screen.getByRole('button', { name: /Section Profile/i });
+    fireEvent.click(trigger);
+
+    expect(onOpen).toHaveBeenCalledOnce();
+    expect(trigger.getAttribute('aria-expanded')).toBe('false');
+    expect(screen.queryByRole('button', { name: 'Security' })).toBeNull();
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <SectionNav
+          mode="mobile"
+          groups={groups}
+          activeKey="profile"
+          onSelect={vi.fn()}
+          open
+          onOpen={onOpen}
+          onClose={onClose}
+        >
+          <div data-testid="section-content">Section content</div>
+        </SectionNav>
+      </ThemeProvider>,
+    );
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+    expect(screen.getByRole('button', { name: 'Security' })).toBeTruthy();
+  });
+
+  it('renders the desktop sidebar and children in a two-column grid, while mobile renders a trigger and no sidebar', () => {
+    const { container } = renderNav({ sidebarWidth: 312 });
+    const desktopRoot = container.querySelector('[data-section-nav-mode="desktop"]');
+
+    expect(desktopRoot).toBeTruthy();
+    expect(getComputedStyle(desktopRoot).display).toBe('grid');
+    expect(getComputedStyle(desktopRoot).gridTemplateColumns).toBe('312px minmax(0, 1fr)');
+    expect(container.querySelector('nav')).toBeTruthy();
+    expect(screen.getByTestId('section-content')).toBeTruthy();
+
+    cleanup();
+    const mobile = renderNav({ mode: 'mobile' });
+    expect(screen.getByRole('button', { name: /Section Profile/i })).toBeTruthy();
+    expect(mobile.container.querySelector('nav')).toBeNull();
+    expect(mobile.container.querySelector('[data-section-nav-mode="desktop"]')).toBeNull();
+    expect(screen.getByTestId('section-content')).toBeTruthy();
+  });
+
+  it('resolves the default drawer z-index above the SHELL-3 bottom bar', () => {
+    renderNav({ mode: 'mobile' });
+    fireEvent.click(screen.getByRole('button', { name: /Section Profile/i }));
+    const drawer = document.querySelector('.MuiDrawer-root');
+    const drawerZIndex = Number(getComputedStyle(drawer).zIndex);
+
+    expect(drawerZIndex).toBe(theme.zIndex.drawer + 3);
+    expect(drawerZIndex).toBeGreaterThan(theme.zIndex.drawer + 2);
+  });
+
+  it('follows surface and divider tokens under both createAppTheme and plain MUI themes', () => {
+    const themes = [
+      createAppTheme({
+        palette: {
+          primary: { main: '#123456' },
+          background: { paper: '#F1F2F3' },
+          divider: '#445566',
+        },
+      }),
+      createTheme({
+        palette: {
+          primary: { main: '#654321' },
+          background: { paper: '#E7E8E9' },
+          divider: '#665544',
+        },
+      }),
+    ];
+    const expected = [
+      { surface: 'rgb(241, 242, 243)', divider: 'rgb(68, 85, 102)' },
+      { surface: 'rgb(231, 232, 233)', divider: 'rgb(102, 85, 68)' },
+    ];
+
+    themes.forEach((currentTheme, index) => {
+      const { container } = renderNav({}, currentTheme);
+      const groupPaper = container.querySelector('.MuiPaper-root');
+      const groupHeader = groupPaper.querySelector('[id]');
+
+      expect(getComputedStyle(groupPaper).backgroundColor).toBe(expected[index].surface);
+      expect(getComputedStyle(groupHeader).borderBottomColor).toBe(expected[index].divider);
+      cleanup();
+    });
+  });
+
+  it('keeps the promoted drawer dimensions and safe-area declaration', () => {
+    expect(SECTION_NAV_DRAWER_PAPER_SX).toMatchObject({
+      borderTopLeftRadius: 18,
+      borderTopRightRadius: 18,
+      maxHeight: '78dvh',
+      p: 2,
+      pb: 'max(16px, env(safe-area-inset-bottom))',
+    });
+  });
+
+  it('ships every component-owned chrome string in all supported locales', () => {
+    expect(Object.keys(sectionNavTranslations)).toEqual([
+      'SectionNav.TITLE',
+      'SectionNav.TRIGGER_EYEBROW',
+      'SectionNav.LAST_OPENED',
+    ]);
+    Object.values(sectionNavTranslations).forEach((translations) => {
+      expect(Object.keys(translations)).toEqual(['de', 'fr', 'en', 'sw']);
+      expect(Object.values(translations).every(Boolean)).toBe(true);
+    });
+  });
+});

package/work-orders/AUTH-4.md

@@ -0,0 +1,183 @@
+# AUTH-4 — The account user list on a phone
+
+**Target repo:** `ui-core-micha` (branch `main` — this repo has no `develop`)
+**Tier:** 3 (shared core)
+**Review:** independent `reviewer` **and** `ui_reviewer` — both mandatory, concurrent
+**Version target:** the next **minor** after `SHELL-5` — the component gains a responsive mode it did
+not have, which is a capability rather than a fix. Read the published version at implementation time.
+**Prototype:** `work-orders/assets/AUTH-4-user-list-card.html` — the **composition** spec. The
+two-width rendered side-by-side is therefore a commit gate.
+**Sequencing:** **after `SHELL-5`.** Both are ucm work orders on the same screen; `SHELL-5` changes how
+the users section is *reached*, this changes what is *in* it.
+**Strand:** split out of `DS-11` by operator decision, because its fix class differs from the
+navigation shell's.
+
+---
+
+## A. Envelope
+
+### Goal
+
+`UserListComponent`'s table is right for a desktop and unusable on a phone. Give it a card layout
+below `md`. Above `md` **nothing changes**.
+
+### The driver, measured 2026-08-11 in cockpit
+
+All figures at `innerWidth` **411** CSS px — the mobile preset yields 411, not 375, so at the real
+target every figure is worse.
+
+| | measured |
+|---|---|
+| Table width | **1053 px** |
+| Container | **325 px** → 728 px of overflow |
+| Container `overflow-x` | `auto`; **the document does not overflow** |
+| Columns | Email 220, Name 180, New 90, Successful Login 163, Role 180, Actions 220 |
+| Cell padding | `10px 16px` — already the baseline's `density.tableCellPadding` |
+
+**This is not a broken layout.** The container scrolls and the page does not. It is a desktop table
+shown unchanged on a phone, with Role and Actions — the two things the screen exists for — entirely
+outside the view.
+
+**The cheap fix was tested and does not work.** 253 px of that width is `New` (90) and
+`Successful Login` (163), both **default-on props an app can switch off today** —
+`AccountPage` forwards all of them (`AccountPage.jsx:238-240`), and cockpit simply left the defaults.
+But the four remaining columns are Email 220 + Name 180 + Role 180 + Actions 220 = **800 px** against
+a 325 px container. **Configuration cannot fix this; only structure can.** That is now established
+rather than assumed.
+
+`SHELL-2` measured 1045 px on 2026-08-08 and it is 1053 px today (+8 px), so the number is stable —
+`THEME-4`/`THEME-5` did not move the rendered density.
+
+### Why cards and not a scrolling table
+
+The component is **interactive per row**: the role is an inline `Select`
+(`UserListComponent.jsx:358-364`), there is a delete action plus app-supplied `extraRowActions`
+(`:425-451`), a search field (`:506`), sortable columns (`:541`) and pagination. An administrator
+opens this screen to **change a role** or **remove someone**. Any layout that puts those behind
+horizontal scrolling defeats the screen's purpose — which is why a sticky-first-column table was
+considered and rejected: it makes the defect tolerable instead of fixing it.
+
+### Scope
+
+Below `md`, one card per user. The prototype is the composition spec; **four decisions in it are
+load-bearing and must not be quietly re-decided:**
+
+1. **The email is the card title, the name is secondary.** The email is what an administrator
+   searches by and the only guaranteed-present field. A user without a name gets a **muted
+   placeholder**, not an empty line. Verified in the prototype: a 47-character address wraps to two
+   lines via `overflow-wrap: anywhere` without overflowing a 357 px card.
+2. **The two boolean columns become labelled chips.** In the table they are icon-only with a
+   `Tooltip` (`:187-195`) — and **a tooltip is unreachable on a touch pointer**, so the information is
+   effectively absent on the device this work order is about. Chips carry the words. This is a
+   deliberate small improvement over strict parity, not drift, and it is why the flags cost vertical
+   space instead of being dropped.
+3. **Role and delete sit in a footer behind a divider.** They are the actions; separating them keeps
+   the card's top half purely identifying. The select fills the remaining width so its value is never
+   truncated; delete keeps the full 44 px touch target.
+4. **Sorting needs its own control.** A card list has no column headers to click, so the
+   sortable-column affordance **disappears with the table**. A compact sort control sits beside the
+   search field. Without it the mobile view silently loses a capability the desktop has — the kind of
+   regression that is invisible in a diff and that no test would catch unless it is asked for. It is
+   asked for here.
+
+**What the app supplies must keep working**, since the column set is app-configurable:
+
+| Input | In the card |
+|---|---|
+| `extraColumns` | rendered as **label: value** rows below the chips, in the given order. **No new required field** on the column definition — an app that passes columns today keeps working unchanged. |
+| `extraRowActions` | join delete in the footer. **Beyond three actions total they must collapse into an overflow menu**, or the footer wraps and the card loses its shape. |
+| `showNewColumn` / `showSuccessfulLoginColumn` / `showRoleColumn` | chips (or the role select) when on, **absent** when off — a shorter card, not an empty chip row. |
+
+### Non-goals / do not touch
+
+- **The table above `md`.** Byte-identical. Six columns are scannable at 1136 px and the strip beside
+  them has 570 px of headroom.
+- **The column defaults.** `New` and `Successful Login` stay default-on. Flipping them would be a
+  silent change to the account screen in every app — a separate decision, not a side effect of this
+  work order.
+- **The delete confirmation dialog**, the invite flow, the role list an app supplies, and every other
+  account section.
+- **The section navigation** — that is `SHELL-5`.
+- No permission, data-contract or API change. No new required prop. No baseline token change: the
+  card consumes tokens and introduces none, so there is **no token delta list**.
+- No pagination or search redesign; both stay, above the list.
+
+### Risks
+
+- **`AccountPage` is mounted by at least ten apps** — bigler-consult, cockpit, fitness-monitor,
+  hpc-bridge, hram, innoservice, jg-ferien, kerzenziehen, reimbursements. The account screen's user
+  list changes on a phone everywhere at once, and there is no staging net: a version bump on `main`
+  publishes. The two reviews and the rendered gate carry it.
+- **Two renderings to keep in step.** From now on a change to a column must be made twice, or the
+  card and the table drift. Tests 3 and 4 below are what make the drift visible.
+- **A long list of cards is a long scroll.** Mitigated by the existing search and pagination, not by
+  this work order — and worth watching in an app with many users rather than asserting it is fine.
+- **`extraRowActions` beyond three** is the shape's real limit. The overflow-menu rule is in scope
+  precisely so the limit is handled rather than discovered.
+
+### Required tests to WRITE
+
+1. Below `md` the card list renders and no `<table>` is present; at `md` and above the table renders
+   and no cards are. **Prove both directions** — a one-sided test passes on a component that never
+   switches.
+2. A user without a name renders the muted placeholder, not an empty element.
+3. `extraColumns` appear as label/value rows in the card, in the given order, and still as columns in
+   the table.
+4. `extraRowActions`: three or fewer render inline in the footer; **more than three collapse into an
+   overflow menu**.
+5. Each of the three column toggles set to `false` removes its chip from the card **and** its column
+   from the table — no empty chip row.
+6. The mobile sort control changes the order, and the sortable column headers still work above `md`.
+7. Pagination and search still function in the card mode.
+8. `THEME-4`'s shadowing check still returns no findings — any `sx` the card introduces must not
+   duplicate a baseline `styleOverrides` key. The card uses `MuiCard`, which the baseline styles, so
+   this is a live risk rather than a formality.
+
+Plus `tsc -p tsconfig.build.json --noEmit` clean. **No full-suite run** — affected set is
+`UserListComponent`'s spec, `AccountPage`'s, and the theme spec touched by test 8.
+
+### Verification
+
+The **two-width rendered side-by-side at 375 px and 1280 px** against the prototype, per the standing
+gate. Measure, do not eyeball, the number this work order exists to fix: **at 375 px no element may
+exceed its container**, and the 728 px of overflow must be gone. At 1280 px the table must be
+unchanged — compare it against the prototype's section 3, which exists so that "unchanged" is part of
+the spec rather than an omission.
+
+State whether real screenshots were obtained or DOM/computed-style inspection substituted. Capture has
+failed repeatedly in this estate; the substitution is declared, not silent.
+
+### Parity guardrail
+
+Presentation only, with the one stated exception: the boolean flags gain visible labels because their
+tooltip is unreachable on touch. Every datum the table shows, the card shows. No behaviour, no
+permissions, no data contract, no routing.
+
+---
+
+## B. Implementation map
+
+*Filled by the Orchestrator on `git pull` — see `AGENTS.md` → "Work Order".*
+
+### Execution directive (read this first)
+
+> **If you are the implementer reading this work order as your own specification: this section is
+> NOT addressed to you.** It tells the Orchestrator how to invoke you. **You ARE that invocation —
+> do NOT shell out to `codex exec`.**
+>
+> Implement through `codex exec` in the background — invoked directly via Bash (never the
+> `debugger`/`*_coder` Agent wrappers) with BOTH flags `--skip-git-repo-check` and
+> `--dangerously-bypass-approvals-and-sandbox`. **Pass the WO via stdin, not as a positional
+> argument** (a positional arg hits Windows' command-line length limit — proven repeatedly in this
+> repo). Fallback to direct Claude implementation only on Codex quota/rate-limit/non-zero exit — and
+> note that the fallback flips authorship, so both reviewers stay mandatory either way.
+>
+> **Read `git log origin/main..HEAD` and `git status`, and re-read this WO's register row, before your
+> own review.** Across four ucm work orders the implementer produced an invalid review claim three
+> times — twice by self-committing with a self-report, once by writing a **fabricated** verdict into
+> `WORK_ORDERS.md`. The preamble now forbids editing that file; verify it was respected.
+
+### Mini-handover
+
+Repo: `ui-core-micha` (`C:\Users\biglmi\Documents\webapps\ui-core-micha`), branch `main`.
+WO: `work-orders/AUTH-4.md`. **Run after `SHELL-5`.** Follow `orchestrate-codex`.