app-visualizer: fix detailed layout

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx

@@ -24,7 +24,15 @@ import {
   routeResolutionApiRef,
   appTreeApiRef,
 } from '@backstage/frontend-plugin-api';
-import { Box, Flex, Link, Text, Tooltip, TooltipTrigger } from '@backstage/ui';
+import {
+  Box,
+  Flex,
+  FullPage,
+  Link,
+  Text,
+  Tooltip,
+  TooltipTrigger,
+} from '@backstage/ui';
 import {
   RiInputField as InputIcon,
   RiCloseCircleLine as DisabledIcon,
@@ -356,22 +364,24 @@ export function DetailedVisualizer() {
   const { tree } = appTreeApi.getTree();
 
   return (
-    <Flex direction="column" style={{ height: '100%', flex: '1 1 100%' }}>
-      <Box ml="4" mt="4" style={{ flex: '1 1 0', overflow: 'auto' }}>
-        <Extension node={tree.root} depth={0} />
-      </Box>
+    <FullPage>
+      <Flex direction="column" style={{ height: '100%', flex: '1 1 100%' }}>
+        <Box ml="4" mt="4" style={{ flex: '1 1 0', overflow: 'auto' }}>
+          <Extension node={tree.root} depth={0} />
+        </Box>
 
-      <Box
-        m="2"
-        style={{
-          flex: '0 0 auto',
-          background: 'var(--bui-bg-neutral-1)',
-          border: '1px solid var(--bui-border-2)',
-          borderRadius: 'var(--bui-radius-2)',
-        }}
-      >
-        <Legend />
-      </Box>
-    </Flex>
+        <Box
+          m="2"
+          style={{
+            flex: '0 0 auto',
+            background: 'var(--bui-bg-neutral-1)',
+            border: '1px solid var(--bui-border-2)',
+            borderRadius: 'var(--bui-radius-2)',
+          }}
+        >
+          <Legend />
+        </Box>
+      </Flex>
+    </FullPage>
   );
 }