Workbench-Pattern
Die 2-bis-3-Spalten-Workbench ist das primaere Anwendungs-UI-Pattern fuer die Verwaltung von Arbeitselementen, Faellen, Tickets oder beliebigen Entitaeten mit einem Listen-Detail-Kontext-Workflow. Sie bietet eine persistente Listenansicht, einen austauschbaren Detailbereich und eine optionale dritte Spalte fuer kontextbezogene Inhalte wie Notizen.
Pattern Overview
2-Pane Default
List pane (left) + detail pane (right). Click an item in the list to load its detail via htmx partial. The detail pane swaps content without full-page reload. Selection state is tracked client-side with Alpine.js.
3-Pane on Demand
A third notes/context pane appears on the right when triggered by a CTA on a detail item. The detail pane narrows to accommodate. Close the third pane to return to the 2-pane layout.
Key Techniques
Negative margins break out of AppShell padding. Alpine.js toggles grid classes and pane visibility. htmx swaps pane content. CSS transitions keep layout shifts smooth.
CSS Class Reference
| Class | Purpose |
|---|---|
lmn-workbench-grid | 12-col grid for 2-pane layout (list 4 + detail 8) |
lmn-workbench-grid-with-notes | 12-col grid for 3-pane layout (list 4 + detail 5 + notes 3) |
lmn-workbench-pane-list | Left list pane (col-span-4 / col-span-3) |
lmn-workbench-pane-detail | Detail pane in 2-pane mode (col-span-8 / col-span-9) |
lmn-workbench-pane-detail-with-notes | Detail pane in 3-pane mode (col-span-5) |
lmn-workbench-pane-notes | Third pane for contextual content (col-span-3 / col-span-4) |
lmn-ticket-list | Divided list container for items |
lmn-ticket-item | Clickable list item with hover state |
lmn-ticket-item-selected | Active selection highlight |
lmn-timeline-event | Timeline entry container (flex with rail) |
lmn-timeline-card | Content card for standard entries |
lmn-timeline-card-ai | Content card for AI-generated entries |
lmn-notes-header | Notes pane header with close button |
lmn-note-card | Individual note card |
Interactive Demo
Click items, open notes, and resize to see the responsive layout in action.
Flussufer Apartments
Unit 12A — Lease Renewal
Created: 10 Mar 2026 14:22
Updated: 10 Mar 2026 14:35
Contact
Anna SchmidtAI Assistant Summary
2 AI-assisted actions on this case. 1 draft awaiting review.
Communication History
Sehr geehrte Damen und Herren, mein Mietvertrag fuer die Wohnung 12A in den Flussufer Apartments laeuft bald aus. Ich wuerde gerne ueber eine Verlaengerung sprechen. Mit freundlichen Gruessen, Anna Schmidt
Mietvertrag Einheit 12A, Flussufer Apartments. Aktuelle Miete: 1.450 EUR/Monat. Vertragslaufzeit bis 30.04.2025. Verlaengerungsklausel vorhanden. Marktanpassung: +3,2%.
Sehr geehrte Frau Schmidt, vielen Dank fuer Ihre Anfrage zur Vertragsverlaengerung. Wir freuen uns, Ihnen mitteilen zu koennen, dass eine Verlaengerung moeglich ist. Die neue monatliche Miete betraegt 1.496 EUR. Wir werden Ihnen den aktualisierten Vertrag in Kuerze zusenden.