1515 */
1616
1717import { PropsWithChildren } from 'react' ;
18- import { makeStyles } from '@material-ui/core' ;
18+ import { styled } from '@mui/material/styles' ;
19+ import Box from '@mui/material/Box' ;
1920import HomeIcon from '@material-ui/icons/Home' ;
2021import ExtensionIcon from '@material-ui/icons/Extension' ;
2122import LibraryBooks from '@material-ui/icons/LibraryBooks' ;
@@ -37,57 +38,94 @@ import {
3738} from '@red-hat-developer-hub/backstage-plugin-global-header' ;
3839import { NotificationsSidebarItem } from '@backstage/plugin-notifications' ;
3940
40- const useStyles = makeStyles ( ( ) => ( {
41- pageWithoutFixHeight : {
42- '> div[class*="-sidebarLayout"]' : {
43- height : '100vh' ,
41+ /** This component is copy pasted from RHDH and should be kept in sync. */
42+ const PageWithoutFixHeight = styled ( Box , {
43+ name : 'RHDHPageWithoutFixHeight' ,
44+ slot : 'root' ,
45+ } ) ( ( ) => ( {
46+ // Use the complete viewport (similar to how Backstage does it) and make the
47+ // page content part scrollable below. We also need to compensate for the
48+ // above-sidebar position of the global header as it takes up a fixed height
49+ // at the top of the page.
50+ display : 'flex' ,
51+ flexDirection : 'column' ,
52+ height : '100vh' ,
53+
54+ // This solves the same issue for techdocs, which was reported as
55+ // https://issues.redhat.com/browse/RHIDP-4637
56+ '.techdocs-reader-page > main' : {
57+ height : 'unset' ,
58+ } ,
59+ } ) ) ;
60+
61+ /** This component is copy pasted from RHDH and should be kept in sync. */
62+ const SidebarLayout = styled ( Box , {
63+ name : 'RHDHPageWithoutFixHeight' ,
64+ slot : 'sidebarLayout' ,
65+ shouldForwardProp : prop =>
66+ prop !== 'aboveSidebarHeaderHeight' &&
67+ prop !== 'aboveMainContentHeaderHeight' ,
68+ } ) (
69+ ( {
70+ aboveSidebarHeaderHeight,
71+ aboveMainContentHeaderHeight,
72+ } : {
73+ aboveSidebarHeaderHeight ?: number ;
74+ aboveMainContentHeaderHeight ?: number ;
75+ } ) => ( {
76+ // We remove Backstage's 100vh on the content, and instead rely on flexbox
77+ // to take up the whole viewport.
78+ display : 'flex' ,
79+ flexGrow : 1 ,
80+ maxHeight : `calc(100vh - ${ aboveSidebarHeaderHeight ?? 0 } ,
81+
82+ '& div[class*="BackstageSidebarPage"]' : {
4483 display : 'flex' ,
4584 flexDirection : 'column' ,
46- } ,
47- '> div > main' : {
4885 height : 'unset' ,
4986 flexGrow : 1 ,
87+ // Here we override the theme so that the Backstage default page suspense
88+ // takes up the whole height of the page instead of 100vh. The difference
89+ // lies in the height of the global header above the sidebar.
90+ '@media (min-width: 600px)' : {
91+ '& > [class*="MuiLinearProgress-root"]' : {
92+ height : 'unset' ,
93+ flexGrow : 1 ,
94+ } ,
95+ } ,
5096 } ,
51- '.techdocs-reader-page > main' : {
52- height : 'unset' ,
97+
98+ // The height is controlled by the flexbox in the BackstageSidebarPage.
99+ '& main[class*="BackstagePage-root"]' : {
100+ height : `calc(100vh - ${
101+ aboveSidebarHeaderHeight ! + aboveMainContentHeaderHeight !
102+ } px)`,
103+ flexGrow : 1 ,
53104 } ,
54- } ,
55- sidebarItem : {
56- textDecorationLine : 'none' ,
57- } ,
58- sidebarLayout : {
105+
106+ // We need to compensate for the above-sidebar position of the global header
107+ // as it takes up a fixed height at the top of the page.
59108 '& div[class*="BackstageSidebar-drawer"]' : {
60- top : 'var(--global-header-default-height, 64px)' ,
61- height : 'calc(100vh - var(--global-header-default-height, 64px))' ,
109+ top : `max(0px, ${ aboveSidebarHeaderHeight ?? 0 } ,
62110 } ,
63- '& main[class*="BackstagePage-root"]' : {
64- height : `calc(100vh - (var(--global-header-default-height, 64px) - var(--rhdh-v1-page-inset, 1.5rem)))` ,
65- marginTop : 'calc(-1 * var(--rhdh-v1-page-inset, 1.5rem))' ,
66- marginBottom : 'calc(-1 * var(--rhdh-v1-page-inset, 1.5rem))' ,
67- overflow : 'hidden' ,
68- display : 'flex' ,
69- flexDirection : 'column' ,
70- '& article' : {
71- flex : 1 ,
72- overflow : 'auto' ,
73- } ,
74- } ,
75- } ,
76- } ) ) ;
111+ } ) ,
112+ ) ;
77113
78114export const Root = ( { children = null } : PropsWithChildren < { } > ) => {
79- const { pageWithoutFixHeight, sidebarLayout } = useStyles ( ) ;
80-
81115 return (
82- < div className = { pageWithoutFixHeight } >
83- < div >
116+ < PageWithoutFixHeight >
117+ < div id = "above-sidebar-header-container" >
84118 { /* update globalHeaderMountPoints config to test Global header */ }
85119 < GlobalHeaderComponent
86120 globalHeaderMountPoints = { defaultGlobalHeaderComponentsMountPoints }
87121 />
88122 </ div >
89- < div className = { sidebarLayout } >
123+ < SidebarLayout
124+ aboveMainContentHeaderHeight = { 0 }
125+ aboveSidebarHeaderHeight = { 64 }
126+ >
90127 < SidebarPage >
128+ < div id = "above-main-content-header-container" />
91129 < Sidebar >
92130 < SidebarGroup label = "Menu" icon = { < MenuIcon /> } >
93131 { /* Global nav, not org-specific */ }
@@ -115,7 +153,7 @@ export const Root = ({ children = null }: PropsWithChildren<{}>) => {
115153 </ Sidebar >
116154 { children }
117155 </ SidebarPage >
118- </ div >
119- </ div >
156+ </ SidebarLayout >
157+ </ PageWithoutFixHeight >
120158 ) ;
121159} ;
![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4&size=40){kind=avatar}
0 commit comments