fix: org chart canvas fits viewport with import/export buttons

Use flex layout so the canvas fills remaining space after the button bar,
instead of a fixed viewport calc that didn't account for button height.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta 2026-03-16 19:43:08 -05:00
parent dd11e7aa7b
commit 6a1c198c04

View file

@ -268,8 +268,8 @@ export function OrgChart() {
} }
return ( return (
<> <div className="flex flex-col h-[calc(100dvh-6rem)]">
<div className="mb-4 flex items-center justify-start gap-2"> <div className="mb-2 flex items-center justify-start gap-2 shrink-0">
<Link to="/company/import"> <Link to="/company/import">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
<Upload className="mr-1.5 h-3.5 w-3.5" /> <Upload className="mr-1.5 h-3.5 w-3.5" />
@ -285,7 +285,7 @@ export function OrgChart() {
</div> </div>
<div <div
ref={containerRef} ref={containerRef}
className="w-full h-[calc(100dvh-6rem)] overflow-hidden relative bg-muted/20 border border-border rounded-lg" className="w-full flex-1 min-h-0 overflow-hidden relative bg-muted/20 border border-border rounded-lg"
style={{ cursor: dragging ? "grabbing" : "grab" }} style={{ cursor: dragging ? "grabbing" : "grab" }}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
@ -435,7 +435,7 @@ export function OrgChart() {
})} })}
</div> </div>
</div> </div>
</> </div>
); );
} }