Merge pull request #349 from grafana/304-user-tabs

304 - Fixed tabs sizing in user edit modal

grafana-plugin/src/containers/UserSettings/UserSettings.module.css

@@ -1,7 +1,10 @@
 .modal {
-  width: 720px;
+  width: 860px; /* wide enough so that all tabs fit in */
 }
 
 .modal.modal-wide {
-  width: 1100px;
+  --spacing: 10px;
+
+  width: calc(100% - var(--spacing) * 2); /* allow lateral spacing */
+  max-width: 1100px;
 }

grafana-plugin/src/containers/UserSettings/UserSettings.tsx

@@ -9,6 +9,7 @@ import { Tabs, TabsContent } from 'containers/UserSettings/parts';
 import { User as UserType } from 'models/user/user.types';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
+import { BREAKPOINT_TABS } from 'utils/consts';
 
 import { UserSettingsTab } from './UserSettings.types';
 
@@ -16,8 +17,6 @@ import styles from './UserSettings.module.css';
 
 const cx = cn.bind(styles);
 
-const TABS_BREAKPOINT = 1224;
-
 interface UserFormProps {
   onHide: () => void;
   id: UserType['pk'] | 'new';
@@ -39,7 +38,7 @@ const UserSettings = observer((props: UserFormProps) => {
   const [activeTab, setActiveTab] = useState<UserSettingsTab>(tab);
 
   const isDesktopOrLaptop = useMediaQuery({
-    query: `(min-width: ${TABS_BREAKPOINT}px)`,
+    query: `(min-width: ${BREAKPOINT_TABS}px)`,
   });
 
   useEffect(() => {
@@ -48,18 +47,12 @@ const UserSettings = observer((props: UserFormProps) => {
     }
   }, [isDesktopOrLaptop]);
 
-  const getTabClickHandler = useCallback((tab: UserSettingsTab) => {
-    return () => {
-      onTabChange(tab);
-    };
-  }, []);
-
   const onTabChange = useCallback((tab: UserSettingsTab) => {
     setActiveTab(tab);
   }, []);
 
   const isModalWide =
-    (activeTab === UserSettingsTab.UserInfo && isDesktopOrLaptop) || activeTab === UserSettingsTab.PhoneVerification;
+    !isDesktopOrLaptop || activeTab === UserSettingsTab.UserInfo || activeTab === UserSettingsTab.PhoneVerification;
 
   const [showNotificationSettingsTab, showSlackConnectionTab, showTelegramConnectionTab, showMobileAppVerificationTab] =
     [

grafana-plugin/src/utils/consts.ts

@@ -2,3 +2,6 @@ import plugin from '../../package.json'; // eslint-disable-line
 
 export const APP_TITLE = 'Grafana OnCall';
 export const APP_SUBTITLE = `Developer-friendly incident response (${plugin?.version})`;
+
+// Reusable breakpoint sizes
+export const BREAKPOINT_TABS = 1024;