Set height of page to 100vh

- Add SidebarScroll Wrapper

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

packages/app/src/components/Root/Root.tsx

@@ -39,6 +39,7 @@ import {
   SidebarItem,
   SidebarDivider,
   SidebarSpace,
+  SidebarScrollWrapper,
 } from '@backstage/core-components';
 
 const useSidebarLogoStyles = makeStyles({
@@ -88,10 +89,12 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
       <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
       {/* End global nav */}
       <SidebarDivider />
-      <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
-      <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
-      <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
-      <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
+      <SidebarScrollWrapper>
+        <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
+        <SidebarItem icon={RuleIcon} to="lighthouse" text="Lighthouse" />
+        <SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
+        <SidebarItem icon={GraphiQLIcon} to="graphiql" text="GraphiQL" />
+      </SidebarScrollWrapper>
       <SidebarDivider />
       <Shortcuts />
       <SidebarSpace />

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

@@ -25,7 +25,8 @@ const useStyles = makeStyles(() => ({
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'auto auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    minHeight: '100vh',
+    height: '100vh',
+    overflowY: 'auto',
   },
 }));
 

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

@@ -290,3 +290,11 @@ export const SidebarDivider = styled('hr')({
   border: 'none',
   margin: '12px 0px',
 });
+
+export const SidebarScrollWrapper = styled('div')({
+  flex: '0 1 auto',
+  overflowY: 'scroll',
+  // Display at least one item in the container
+  // Question: Can this be a config/theme variable - if so, which? :/
+  minHeight: '48px',
+});

packages/core-components/src/layout/Sidebar/index.ts

@@ -23,6 +23,7 @@ export {
   SidebarSearchField,
   SidebarSpace,
   SidebarSpacer,
+  SidebarScrollWrapper,
 } from './Items';
 export { IntroCard, SidebarIntro } from './Intro';
 export {

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

@@ -25,7 +25,8 @@ const useStyles = makeStyles(() => ({
       "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'",
     gridTemplateRows: 'auto auto 1fr',
     gridTemplateColumns: 'auto 1fr auto',
-    minHeight: '100vh',
+    height: '100vh',
+    overflowY: 'auto',
   },
 }));
 

plugins/shortcuts/src/Shortcuts.tsx

@@ -22,18 +22,14 @@ import { ShortcutItem } from './ShortcutItem';
 import { AddShortcut } from './AddShortcut';
 import { shortcutsApiRef } from './api';
 
-import { Progress, SidebarItem } from '@backstage/core-components';
+import {
+  Progress,
+  SidebarItem,
+  SidebarScrollWrapper,
+} from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  root: {
-    flex: '1 1 auto',
-    overflowY: 'scroll',
-  },
-});
-
 export const Shortcuts = () => {
-  const classes = useStyles();
   const shortcutApi = useApi(shortcutsApiRef);
   const shortcuts = useObservable(
     useMemo(() => shortcutApi.shortcut$(), [shortcutApi]),
@@ -50,7 +46,7 @@ export const Shortcuts = () => {
   };
 
   return (
-    <div className={classes.root}>
+    <SidebarScrollWrapper>
       <SidebarItem
         icon={PlayListAddIcon}
         text="Add Shortcuts"
@@ -72,6 +68,6 @@ export const Shortcuts = () => {
           />
         ))
       )}
-    </div>
+    </SidebarScrollWrapper>
   );
 };