From 63be2def762f5a972a04da183b76700e95f40e86 Mon Sep 17 00:00:00 2001 From: fs Date: Wed, 15 Apr 2026 18:44:29 +0200 Subject: [PATCH] docs: add UI/UX component guidelines and improve breadcrumb/tab-panel styling Add "Komponenten in Formularen" section to boundaries-ui.md with rules for core button classes, margin resets, checkbox sizing, sticky positioning, icon-only buttons, responsive grids, and CSS variables. Add matching quick-reference bullets to CLAUDE.md UI Patterns section. Fix breadcrumb wrapping: nowrap + overflow hidden + flex-shrink for single-line behavior. Add data-tab-panel-wide opt-out for full-width tab panels (default 70ch). Co-Authored-By: Claude Opus 4.6 --- .../core-guardrails/references/boundaries-ui.md | 10 ++++++++++ CLAUDE.md | 4 ++++ .../pages/helpdesk/software-products/_form.phtml | 2 +- web/css/components/app-breadcrumb.css | 15 +++++++++++++-- web/css/components/app-details.css | 4 ++++ 5 files changed, 32 insertions(+), 3 deletions(-) diff --git a/.agents/skills/core-guardrails/references/boundaries-ui.md b/.agents/skills/core-guardrails/references/boundaries-ui.md index 5d8fd28..5994f51 100644 --- a/.agents/skills/core-guardrails/references/boundaries-ui.md +++ b/.agents/skills/core-guardrails/references/boundaries-ui.md @@ -58,3 +58,13 @@ 2. MUST NOT globale unscoped Overrides ohne klaren Scope einfuehren. 3. MUST Vendor-Overrides nur in `web/css/vendor-overrides/**` pflegen. 4. MUST bestehende CSS-Variablen bevorzugen statt neue Inline-Farbwerte zu verteilen. + +## Komponenten in Formularen + +1. MUST Core-Button-Klassen (`secondary outline small`, `danger outline small`) verwenden statt Custom-Button-CSS. Custom-CSS nur fuer Layout (z.B. `border-radius: 50%`). +2. MUST `margin-bottom: 0` auf Buttons, Inputs, Selects und Labels innerhalb selbststaendiger Komponenten in Formularen resetten (Core setzt `margin-bottom: var(--app-spacing)` global). +3. MUST Checkboxen in Flex-Containern mit expliziter Groesse (`width: 1.25em; height: 1.25em`) und `flex-shrink: 0` versehen (Core nutzt `appearance: none` mit Custom-Sizing). +4. MUST `position: sticky` mit `top: calc(var(--app-topbar-height) + ...)` verwenden, nicht `top: 0` (Topbar ist sticky). +5. MUST Icon-Only-Buttons mit `data-tooltip` und `aria-label` versehen. +6. MUST bei `grid-template-columns` mit mehr als einer Spalte ein `@media`-Fallback auf Single-Column definieren. +7. MUST bestehende `--app-*` CSS-Variablen fuer Farben verwenden, nie Farbwerte hardcoden. diff --git a/CLAUDE.md b/CLAUDE.md index 2ff8162..8a53b6f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -159,6 +159,7 @@ docker/ # Dockerfiles, Nginx configs, PHP configs ### UI Patterns - Edit pages: tabs → `Master data` | `Visibility` | optional `Danger zone` +- **Tab panel width**: `data-tab-panel` defaults to `max-width: 70ch` (optimal for form readability). Add `data-tab-panel-wide` for panels that need full width (e.g. split layouts, side-by-side editors, preview panels, tables). Use 70ch for standard form fields (text inputs, selects, textareas); use wide for multi-column layouts or content that benefits from horizontal space. - Titlebar partial for primary actions (Save, Save & close) - Secondary actions in Aside block via `app-details-aside-actions.phtml` - Lists use Grid.js via `initStandardListPage()` (GR-UI-LIST) @@ -166,6 +167,9 @@ docker/ # Dockerfiles, Nginx configs, PHP configs - New views must handle loading, empty, error, and success states (GR-UI-014) - All visible text wrapped in `t('...')` - Check existing JS/CSS components before adding new ones (GR-UI-REUSE) +- **Buttons**: Always use core classes (`secondary outline small`, `danger outline small`) — custom CSS only for shape/position. Icon-only buttons must have `data-tooltip` + `aria-label`. +- **Components inside forms**: Reset core `margin-bottom` on buttons/inputs/selects/labels at component scope. Checkboxes in flex need explicit `1.25em` sizing + `flex-shrink: 0`. +- **Sticky elements**: Always use `top: calc(var(--app-topbar-height) + ...)` — never `top: 0`. Multi-column grids must have a responsive single-column `@media` fallback. - **File uploads** use `app-file-upload.phtml` partial (deliberate exception to plain-HTML inputs — the markup is too complex for inline use). See `templates/partials/app-file-upload.phtml` for the `$fileUpload` array contract. Never write file-upload markup inline; always use the partial. ### Never Do This diff --git a/modules/helpdesk/pages/helpdesk/software-products/_form.phtml b/modules/helpdesk/pages/helpdesk/software-products/_form.phtml index e64aa61..61e5f56 100644 --- a/modules/helpdesk/pages/helpdesk/software-products/_form.phtml +++ b/modules/helpdesk/pages/helpdesk/software-products/_form.phtml @@ -26,7 +26,7 @@ $handoverSchemaFields = is_array($handoverSchemaFields ?? null) ? $handoverSchem -
+
section > form [data-tab-panel-wide] { + max-width: none; + } + .app-details-aside-actions { display: grid; gap: calc(var(--app-spacing) * 0.5);