From 4d305921e1c8e3f140cac97e1e65aa3154fe7bfb Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 9 Aug 2022 16:57:01 +0300
Subject: [PATCH 1/2] Fixed tabs sizing in user edit modal

---
 .../containers/UserSettings/UserSettings.module.css |  7 +++++--
 .../src/containers/UserSettings/UserSettings.tsx    | 13 +++----------
 grafana-plugin/src/utils/consts.ts                  |  3 +++
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.module.css b/grafana-plugin/src/containers/UserSettings/UserSettings.module.css
index e724ccd9..389005b0 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.module.css
+++ b/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;
 }
diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
index 20abb1f2..13e2966b 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
+++ b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
@@ -13,11 +13,10 @@ import { useStore } from 'state/useStore';
 import { UserSettingsTab } from './UserSettings.types';
 
 import styles from './UserSettings.module.css';
+import { BREAKPOINT_TABS } from 'utils/consts';
 
 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] =
     [
diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts
index d2ad118c..a7d5b987 100644
--- a/grafana-plugin/src/utils/consts.ts
+++ b/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;

From 8fead87134e691f399665009242e3d504d2cd51a Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 10 Aug 2022 13:02:33 +0300
Subject: [PATCH 2/2] linter import fix

---
 grafana-plugin/src/containers/UserSettings/UserSettings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
index 13e2966b..75ba3c1c 100644
--- a/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
+++ b/grafana-plugin/src/containers/UserSettings/UserSettings.tsx
@@ -9,11 +9,11 @@ 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';
 
 import styles from './UserSettings.module.css';
-import { BREAKPOINT_TABS } from 'utils/consts';
 
 const cx = cn.bind(styles);