Add the list-detail canonical layout

Plan step 35: <x-list-detail>, following the reference's visible-panes
table row by row - one pane below expanded, the detail replacing the list
with a back button once something is selected; from 840px the list a
fixed 360px (412px from 1200px) beside the detail, 24px apart. The
selection binds with wire:model or x-model; below expanded focus moves to
the detail and back() returns it to the item (resources/js/layout.js).
Grid columns mirror in RTL, and the back arrow turns with them.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

This commit is contained in:

Andreas Reinhold / reini

2026-09-14 14:51:13 +02:00

co-authored by

Claude Opus 5

parent b4f1e005de

commit b5c5be1fd7

9 changed files with 578 additions and 0 deletions

									
										resources/css/layout.css
									
		+1
		
												View File
												
				@@ -11,3 +11,4 @@

				@import './layout/grid.css';

				@import './layout/surface.css';

				@import './layout/pane.css';

				@import './layout/list-detail.css';