fix: do not target classnames

Author: logonoff

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

@@ -48,6 +48,8 @@ import { SidebarLogo } from './SidebarLogo';
  * to support the application headers (and the global header plugin)
  * without having multiple scrollbars.
  *
+ * Note that we cannot target class names directly, due to obfuscation in production builds.
+ *
  * This solves also the duplicate scrollbar issues in tech docs:
  * https://issues.redhat.com/browse/RHIDP-4637 (Scrollbar for docs behaves weirdly if there are over a page of headings)
  *
@@ -120,7 +122,8 @@ const SidebarLayout = styled(Box, {
     flexGrow: 1,
     maxHeight: `calc(100vh - ${aboveSidebarHeaderHeight ?? 0}px)`,
 
-    '& div[class*="BackstageSidebarPage"]': {
+    '& > div': {
+      // BackstageSidebarPage-root
       display: 'flex',
       flexDirection: 'column',
       height: 'unset',
@@ -137,14 +140,15 @@ const SidebarLayout = styled(Box, {
     },
 
     // The height is controlled by the flexbox in the BackstageSidebarPage.
-    '& main[class*="BackstagePage-root"]': {
+    '& main': {
       height: `calc(100vh - ${aboveSidebarHeaderHeight! + aboveMainContentHeaderHeight!}px)`,
       flexGrow: 1,
     },
 
     // We need to compensate for the above-sidebar position of the global header
     // as it takes up a fixed height at the top of the page.
-    '& div[class*="BackstageSidebar-drawer"]': {
+    '& > div > nav > div > div': {
+      // BackstageSidebarPage-root > nav > BackstageSidebar-root > BackstageSidebar-drawer
       top: `max(0px, ${aboveSidebarHeaderHeight ?? 0}px)`,
     },
   }),