app: remove a bunch of wrapping page elements

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

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

@@ -24,7 +24,7 @@ import {
   useApi,
   appTreeApiRef,
 } from '@backstage/frontend-plugin-api';
-import { Flex } from '@backstage/ui';
+import { Flex, FullPage } from '@backstage/ui';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 type NodeType =
@@ -148,22 +148,19 @@ export function TreeVisualizer() {
   const graphData = useMemo(() => resolveGraphData(tree), [tree]);
 
   return (
-    <Flex
-      style={{
-        height: '100%',
-        overflow: 'hidden',
-      }}
-    >
-      <DependencyGraph
-        fit="contain"
-        {...graphData}
-        nodeMargin={10}
-        rankMargin={50}
-        paddingX={50}
-        renderNode={Node}
-        ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
-        direction={DependencyGraphTypes.Direction.LEFT_RIGHT}
-      />
-    </Flex>
+    <FullPage>
+      <Flex style={{ height: '100%' }}>
+        <DependencyGraph
+          fit="contain"
+          {...graphData}
+          nodeMargin={10}
+          rankMargin={50}
+          paddingX={50}
+          renderNode={Node}
+          ranker={DependencyGraphTypes.Ranker.TIGHT_TREE}
+          direction={DependencyGraphTypes.Direction.LEFT_RIGHT}
+        />
+      </Flex>
+    </FullPage>
   );
 }

plugins/app/src/extensions/AppRoutes.tsx

@@ -57,19 +57,6 @@ export const AppRoutes = createExtension({
       return element;
     };
 
-    return [
-      coreExtensionData.reactElement(
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100vh',
-            overflow: 'auto',
-          }}
-        >
-          <Routes />
-        </div>,
-      ),
-    ];
+    return [coreExtensionData.reactElement(<Routes />)];
   },
 });

plugins/app/src/extensions/components.tsx

@@ -26,7 +26,7 @@ import {
   ErrorPanel,
   Progress as ProgressComponent,
 } from '@backstage/core-components';
-import { Header, Flex } from '@backstage/ui';
+import { Header } from '@backstage/ui';
 import Button from '@material-ui/core/Button';
 
 export const Progress = SwappableComponentBlueprint.make({
@@ -76,10 +76,7 @@ export const PageLayout = SwappableComponentBlueprint.make({
         const { title, icon, noHeader, headerActions, tabs, children } = props;
         if (tabs) {
           return (
-            <Flex
-              direction="column"
-              style={{ flexGrow: 1, minHeight: 0, gap: 0 }}
-            >
+            <>
               {!noHeader && (
                 <Header
                   title={title}
@@ -88,38 +85,11 @@ export const PageLayout = SwappableComponentBlueprint.make({
                   customActions={headerActions}
                 />
               )}
-              <main
-                style={{
-                  flex: '1 1 0',
-                  minHeight: 0,
-                  overflow: 'auto',
-                  padding: 0,
-                  margin: 0,
-                }}
-              >
-                {children}
-              </main>
-            </Flex>
+              {children}
+            </>
           );
         }
-        return (
-          <Flex
-            direction="column"
-            style={{ flexGrow: 1, minHeight: 0, gap: 0 }}
-          >
-            <main
-              style={{
-                flex: '1 1 0',
-                minHeight: 0,
-                overflow: 'auto',
-                padding: 0,
-                margin: 0,
-              }}
-            >
-              {children}
-            </main>
-          </Flex>
-        );
+        return <>{children}</>;
       },
     }),
 });