From 6a1c198c04dbf248bb0fcce1d8ed3e9d7a7af538 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Mon, 16 Mar 2026 19:43:08 -0500
Subject: [PATCH] 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>
---
 ui/src/pages/OrgChart.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/pages/OrgChart.tsx b/ui/src/pages/OrgChart.tsx
index 644bb322..9c12f818 100644
--- a/ui/src/pages/OrgChart.tsx
+++ b/ui/src/pages/OrgChart.tsx
@@ -268,8 +268,8 @@ export function OrgChart() {
   }
 
   return (
-    <>
-    <div className="mb-4 flex items-center justify-start gap-2">
+    <div className="flex flex-col h-[calc(100dvh-6rem)]">
+    <div className="mb-2 flex items-center justify-start gap-2 shrink-0">
       <Link to="/company/import">
         <Button variant="outline" size="sm">
           <Upload className="mr-1.5 h-3.5 w-3.5" />
@@ -285,7 +285,7 @@ export function OrgChart() {
     </div>
     <div
       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" }}
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
@@ -435,7 +435,7 @@ export function OrgChart() {
         })}
       </div>
     </div>
-    </>
+    </div>
   );
 }