修改画面布局

frontend/src/CategoryEffectTreeApp.tsx

@@ -959,7 +959,12 @@ export default function CategoryEffectTreeApp() {
     );
 
     const maxDepth = layoutNodes.reduce((max, node) => Math.max(max, node.depth), 0);
-    const maxY = layoutNodes.reduce((max, node) => Math.max(max, node.y + NODE_HEIGHT), 0);
+    const maxNodeBottom = layoutNodes.reduce(
+      (max, node) => Math.max(max, node.y + NODE_HEIGHT),
+      0,
+    );
+    const contentBottom = Math.max(yCursor - ROW_GAP, maxNodeBottom);
+    const canvasHeight = contentBottom + CANVAS_PADDING;
 
     const levelHeaders: LevelHeader[] = [];
     for (let depth = 0; depth <= maxDepth; depth += 1) {
@@ -985,7 +990,7 @@ export default function CategoryEffectTreeApp() {
       connectors,
       levelHeaders,
       canvasWidth: (maxDepth + 1) * (NODE_WIDTH + COLUMN_GAP) + CANVAS_PADDING * 2,
-      canvasHeight: Math.max(420, maxY + CANVAS_PADDING),
+      canvasHeight,
     };
   }, [data, roots, detachedCategories, childrenMap, elementsByCategory, expandedCategoryIds, expandedElementParents, showInvalidNodes, expandLevelFilter, categoryDepthMap]);
 

frontend/src/categoryEffectTree.css

@@ -225,10 +225,12 @@ body {
 
 .cet-tree-viewport {
   position: relative;
-  flex: 1;
+  flex: 0 1 auto;
+  max-height: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
+  align-items: stretch;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid rgba(148, 163, 184, 0.25);
@@ -327,15 +329,21 @@ body.cet-tree-fullscreen-active .demand-nav {
 }
 
 .cet-canvas-wrap {
-  flex: 1;
-  min-height: 0;
+  flex: 0 0 auto;
   overflow: auto;
+  max-height: calc(100vh - 320px);
+}
+
+.cet-app--tree-fullscreen .cet-canvas-wrap {
+  max-height: calc(100vh - 96px);
 }
 
 .cet-canvas-scaler {
   position: relative;
+  display: block;
+  width: fit-content;
+  height: fit-content;
   min-width: min-content;
-  min-height: min-content;
 }
 
 .cet-empty {