ShareModal: Responsive tabs and Public Dashboards modal fixed (#66805)

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 <Tab /> or an array of <Tab /> */
@@ -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<HTMLDivElement, Props>(({ children, className, hideBorder }, ref) => {
-  const theme = useTheme2();
-  const tabsStyles = getTabsBarStyles(theme, hideBorder);
+export const TabsBar = React.forwardRef<HTMLDivElement, Props>(({ children, className, hideBorder = false }, ref) => {
+  const styles = useStyles2(getStyles);
 
   return (
-    <div className={cx(tabsStyles.tabsWrapper, className)} ref={ref}>
-      <div className={tabsStyles.tabs} role="tablist">
+    <div className={cx(styles.tabsWrapper, hideBorder && styles.noBorder, className)} ref={ref}>
+      <div className={styles.tabs} role="tablist">
         {children}
       </div>
     </div>
   );
 });
 
+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';

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};

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 (
               <RadioButtonGroup
                 {...rest}
+                size={width < 480 ? 'sm' : 'md'}
                 options={options}
                 onChange={(shareType: PublicDashboardShareType) => {
                   reportInteraction('grafana_dashboards_public_share_type_clicked', {