From e81b3f0fa23434e95a0bf01cef0a28e7f1ee81f8 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 4 Nov 2025 00:15:03 +0100
Subject: [PATCH] app-visualizer: horizontal tree vis + layout fix

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/eighty-results-prove.md                   |  5 +++++
 .../components/AppVisualizerPage/TreeVisualizer.tsx  | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/eighty-results-prove.md

diff --git a/.changeset/eighty-results-prove.md b/.changeset/eighty-results-prove.md
new file mode 100644
index 0000000000..6df2d2f11a
--- /dev/null
+++ b/.changeset/eighty-results-prove.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-visualizer': patch
+---
+
+Improve tree visualizer to use a horizontal layout and fill the content space.
diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
index 8532168bc0..b9058cb87b 100644
--- a/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
+++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TreeVisualizer.tsx
@@ -153,18 +153,22 @@ export function TreeVisualizer({ tree }: { tree: AppTree }) {
   const graphData = useMemo(() => resolveGraphData(tree), [tree]);
 
   return (
-    <Box height="100%" flex="1 1 100%" flexDirection="column" overflow="hidden">
+    <Box
+      flex="1 1 0"
+      display="flex"
+      justifyContent="stretch"
+      alignItems="stretch"
+      overflow="hidden"
+    >
       <DependencyGraph
         fit="contain"
-        style={{ height: '100%', width: '100%' }}
         {...graphData}
         nodeMargin={10}
         rankMargin={50}
         paddingX={50}
         renderNode={Node}
-        align={DependencyGraphTypes.Alignment.DOWN_RIGHT}
         ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
-        direction={DependencyGraphTypes.Direction.TOP_BOTTOM}
+        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}
       />
     </Box>
   );