diff --git a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx index 1adcea44d7..d5f9005a01 100644 --- a/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx +++ b/plugins/techdocs/src/reader/components/TechDocsReaderPage/TechDocsReaderPage.tsx @@ -39,7 +39,7 @@ import { import { CookieAuthRefreshProvider } from '@backstage/plugin-auth-react'; import { createTheme, - makeStyles, + styled, ThemeOptions, ThemeProvider, useTheme, @@ -122,13 +122,6 @@ are retrieved using the useOutlet hook from React Router. NOTE: Render functions are no longer supported in this approach. */ -const useStyles = makeStyles({ - readerPage: { - height: 'inherit', - overflowY: 'visible', - }, -}); - /** * Props for {@link TechDocsReaderLayout} * @public @@ -168,6 +161,14 @@ export type TechDocsReaderPageProps = { overrideThemeOptions?: Partial; }; +/** + * Styled Backstage Page that fills available vertical space + */ +const StyledPage = styled(Page)({ + height: 'inherit', + overflowY: 'visible', +}); + /** * An addon-aware implementation of the TechDocsReaderPage. * @@ -175,7 +176,6 @@ export type TechDocsReaderPageProps = { */ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { const currentTheme = useTheme(); - const classes = useStyles(); const readerPageTheme = createTheme({ ...currentTheme, @@ -216,18 +216,19 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => { {({ metadata, entityMetadata, onReady }) => ( -
- - {children instanceof Function - ? children({ - entityRef, - techdocsMetadataValue: metadata.value, - entityMetadataValue: entityMetadata.value, - onReady, - }) - : children} - -
+ + {children instanceof Function + ? children({ + entityRef, + techdocsMetadataValue: metadata.value, + entityMetadataValue: entityMetadata.value, + onReady, + }) + : children} + )}