fix: start with some printable containers

Signed-off-by: Maapteh <maarten@oudenniel.nl>

packages/core-components/src/layout/Page/Page.tsx

@@ -33,6 +33,11 @@ const useStyles = makeStyles<BackstageTheme>(
       [theme.breakpoints.down('xs')]: {
         height: '100%',
       },
+      '@media print': {
+        display: 'block',
+        height: 'auto',
+        overflowY: 'inherit',
+      },
     },
   }),
   { name: 'BackstagePage' },

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -63,6 +63,9 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       '&::-webkit-scrollbar': {
         display: 'none',
       },
+      '@media print': {
+        display: 'none',
+      },
     },
     drawerWidth: props => ({
       width: props.sidebarConfig.drawerWidthClosed,

packages/core-components/src/layout/Sidebar/MobileSidebar.tsx

@@ -72,6 +72,9 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
       zIndex: theme.zIndex.snackbar,
       // SidebarDivider color
       borderTop: '1px solid #383838',
+      '@media print': {
+        display: 'none',
+      },
     },
 
     overlay: props => ({

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -51,6 +51,10 @@ const useStyles = makeStyles<
       [theme.breakpoints.down('xs')]: {
         paddingBottom: props => props.sidebarConfig.mobileSidebarHeight,
       },
+      '@media print': {
+        paddingLeft: '0px !important',
+        paddingBottom: '0px !important',
+      },
     },
     content: {
       zIndex: 0,