a3b7305e51
* fix: use portal-based positioning for property panel dropdowns StatusDropdown and DisplayModeSelector used absolute positioning within the Inspector's overflow-hidden container, causing dropdowns to be clipped when the Properties panel is narrow (200-280px). Both now render via createPortal into document.body with fixed positioning calculated from the trigger element's bounding rect. This matches the pattern used by existing Radix UI components (Select, Popover) in the codebase. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * design: property dropdown narrow panel fix — before/after frames --------- Co-authored-by: Laputa App <laputa@app.local> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
57 lines
1.4 KiB
Plaintext
57 lines
1.4 KiB
Plaintext
{
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "fpdn_before",
|
|
"name": "Property Dropdown Narrow — Before (clipped)",
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 280,
|
|
"height": 200,
|
|
"fill": "#1a1a1a",
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"padding": 12,
|
|
"theme": "dark",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "fpdn_before_label",
|
|
"content": "Bug: StatusDropdown clipped by overflow:hidden container at 200-280px panel width",
|
|
"fill": "#ff4444",
|
|
"fontFamily": "SF Pro Text",
|
|
"fontSize": 12,
|
|
"fontWeight": "regular",
|
|
"letterSpacing": 0
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "fpdn_after",
|
|
"name": "Property Dropdown Narrow — After (portal, no clip)",
|
|
"x": 320,
|
|
"y": 0,
|
|
"width": 280,
|
|
"height": 200,
|
|
"fill": "#1a1a1a",
|
|
"layout": "vertical",
|
|
"gap": 8,
|
|
"padding": 12,
|
|
"theme": "dark",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "fpdn_after_label",
|
|
"content": "Fix: StatusDropdown + DisplayModeSelector use createPortal with fixed positioning — renders above overflow:hidden, visible at any panel width",
|
|
"fill": "#44bb44",
|
|
"fontFamily": "SF Pro Text",
|
|
"fontSize": 12,
|
|
"fontWeight": "regular",
|
|
"letterSpacing": 0
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|