the editor sections fall to one column when it is narrow
A container query on the scroller, once, so a new section is responsive by being in the column rather than by remembering to say so. Below 320px the two-column sections stack instead of truncating every select to "Martia…". Colors stays flex-wrap: three swatches in a two-column grid is 2 and 1. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
+9
-1
@@ -37,7 +37,15 @@ export const EditorPanel = () => {
|
||||
</div>
|
||||
|
||||
{editor ? (
|
||||
<div className="min-h-0 flex-1 overflow-auto p-3">{editor}</div>
|
||||
/*
|
||||
`@container`, once, for every section inside it.
|
||||
|
||||
The sections lay out in two columns and have to fall back to one when the panel is dragged
|
||||
narrow — and the window's width says nothing about that, because the width here is a divider
|
||||
somebody moves. Declared on the scroller rather than per section, so a new section is
|
||||
responsive by being in the column rather than by remembering to say so.
|
||||
*/
|
||||
<div className="@container min-h-0 flex-1 overflow-auto p-3">{editor}</div>
|
||||
) : (
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center p-6 text-center">
|
||||
{/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
|
||||
|
||||
Reference in New Issue
Block a user