diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx index 6cfb03409be..0e5e9714da3 100644 --- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx +++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx @@ -3,7 +3,7 @@ import React, { ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useTheme2 } from '../../themes'; +import { useStyles2 } from '../../themes'; export interface Props { /** Children should be a single or an array of */ @@ -13,32 +13,31 @@ export interface Props { hideBorder?: boolean; } -const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false) => { - return { - tabsWrapper: - !hideBorder && - css` - border-bottom: 1px solid ${theme.colors.border.weak}; - `, - tabs: css` - position: relative; - display: flex; - height: ${theme.components.menuTabs.height}px; - `, - }; -}); - -export const TabsBar = React.forwardRef(({ children, className, hideBorder }, ref) => { - const theme = useTheme2(); - const tabsStyles = getTabsBarStyles(theme, hideBorder); +export const TabsBar = React.forwardRef(({ children, className, hideBorder = false }, ref) => { + const styles = useStyles2(getStyles); return ( -
-
+
+
{children}
); }); +const getStyles = (theme: GrafanaTheme2) => ({ + tabsWrapper: css` + border-bottom: 1px solid ${theme.colors.border.weak}; + overflow-x: auto; + `, + noBorder: css` + border-bottom: 0; + `, + tabs: css` + position: relative; + display: flex; + height: ${theme.components.menuTabs.height}px; + `, +}); + TabsBar.displayName = 'TabsBar'; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 9625c117975..85d0274fb69 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -150,7 +150,7 @@ const getStyles = (theme: GrafanaTheme2) => { padding: 0; display: flex; flex-direction: column; - flex-grow: 1; + flex: 1; min-height: 0; background: ${theme.colors.background.primary}; border: 1px solid ${theme.components.panel.borderColor}; diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx index 2b67563d255..3e2bcf69c19 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/css'; import React from 'react'; import { useForm } from 'react-hook-form'; +import { useWindowSize } from 'react-use'; import { GrafanaTheme2, SelectableValue } from '@grafana/data/src'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; @@ -107,6 +108,7 @@ const EmailList = ({ }; export const EmailSharingConfiguration = () => { + const { width } = useWindowSize(); const styles = useStyles2(getStyles); const dashboardState = useSelector((store) => store.dashboard); const dashboard = dashboardState.getModel()!; @@ -161,6 +163,7 @@ export const EmailSharingConfiguration = () => { return ( { reportInteraction('grafana_dashboards_public_share_type_clicked', {