Chore: use ScrollContainer across frontend platform components (#95601)

* use ScrollContainer in grafana-ui

* remove extraneous labels

* fix unit tests

public/app/core/components/AppChrome/MegaMenu/MegaMenu.tsx

@@ -6,7 +6,8 @@ import { useLocation } from 'react-router-dom-v5-compat';
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config, reportInteraction } from '@grafana/runtime';
-import { CustomScrollbar, Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
+import { Icon, IconButton, useStyles2, Stack } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 import { t } from 'app/core/internationalization';
 import { setBookmark } from 'app/core/reducers/navBarTree';
@@ -134,7 +135,7 @@ export const MegaMenu = memo(
           </div>
         )}
         <nav className={styles.content}>
-          <CustomScrollbar showScrollIndicators hideHorizontalTrack>
+          <ScrollContainer height="100%" overflowX="hidden" showScrollIndicators>
             <ul className={styles.itemList} aria-label={t('navigation.megamenu.list-label', 'Navigation')}>
               {navItems.map((link, index) => (
                 <Stack key={link.text} direction={index === 0 ? 'row-reverse' : 'row'} alignItems="start">
@@ -162,7 +163,7 @@ export const MegaMenu = memo(
                 </Stack>
               ))}
             </ul>
-          </CustomScrollbar>
+          </ScrollContainer>
         </nav>
       </div>
     );