make tabs horizontally scroll if <1500px

grafana-plugin/src/img/grafanaGlobalStyles.css

@@ -21,6 +21,7 @@
   max-width: unset !important;
   flex-grow: unset !important;
   flex-basis: unset !important;
+  overflow-x: auto;
 }
 
 .page-scrollbar-content > div:first-child {

grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss

@@ -0,0 +1,3 @@
+.root {
+  min-width: 1500px;
+}

grafana-plugin/src/navbar/LegacyNavTabsBar.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 
 import { IconName } from '@grafana/data';
 import { Tab, TabsBar } from '@grafana/ui';
+import cn from 'classnames/bind';
 
 import { pages } from 'pages';
 import { useStore } from 'state/useStore';
 
+import styles from './LegacyNavTabsBar.module.scss';
+
+const cx = cn.bind(styles);
+
 export default function LegacyNavTabsBar({ currentPage }: { currentPage: string }): JSX.Element {
   const store = useStore();
 
@@ -14,7 +19,7 @@ export default function LegacyNavTabsBar({ currentPage }: { currentPage: string
     .filter((page) => (page.hideFromTabsFn ? !page.hideFromTabsFn(store) : !page.hideFromTabs));
 
   return (
-    <TabsBar>
+    <TabsBar className={cx('root')}>
       {navigationPages.map((page, index) => (
         <Tab
           key={index}

grafana-plugin/src/pages/index.tsx

@@ -101,7 +101,7 @@ export const pages: { [id: string]: PageDefinition } = [
   {
     icon: 'cog',
     id: 'settings',
-    text: 'Organization Settings',
+    text: 'Settings',
     hideFromBreadcrumbs: true,
     path: getPath('settings'),
   },

grafana-plugin/src/plugin.json

@@ -34,6 +34,7 @@
       "name": "Alert Groups",
       "path": "/a/grafana-oncall-app/?page=incidents",
       "role": "Viewer",
+      "defaultNav": true,
       "addToNav": true
     },
     {