feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

client/src/App/App.container.jsx

@@ -1,7 +1,7 @@
 import { ApolloProvider } from "@apollo/client/react";
 import * as Sentry from "@sentry/react";
 import { SplitFactoryProvider, useSplitClient } from "@splitsoftware/splitio-react";
-import { ConfigProvider } from "antd";
+import { ConfigProvider, Grid } from "antd";
 import enLocale from "antd/es/locale/en_US";
 import { useEffect, useMemo } from "react";
 import { CookiesProvider } from "react-cookie";
@@ -43,10 +43,47 @@ function AppContainer() {
 
   const currentUser = useSelector(selectCurrentUser);
   const isDarkMode = useSelector(selectDarkMode);
+  const screens = Grid.useBreakpoint();
+  const isPhone = !screens.md;
+  const isUltraWide = Boolean(screens.xxxl);
 
-  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);
+  const theme = useMemo(() => {
+    const baseTheme = getTheme(isDarkMode);
+
+    return {
+      ...baseTheme,
+      token: {
+        ...(baseTheme.token || {}),
+        screenXXXL: 2160
+      },
+      components: {
+        ...(baseTheme.components || {}),
+        Table: {
+          ...(baseTheme.components?.Table || {}),
+          cellFontSizeSM: isPhone ? 12 : 13,
+          cellFontSizeMD: isPhone ? 13 : isUltraWide ? 15 : 14,
+          cellFontSize: isUltraWide ? 15 : 14,
+          cellPaddingInlineSM: isPhone ? 8 : 10,
+          cellPaddingInlineMD: isPhone ? 10 : 14,
+          cellPaddingInline: isUltraWide ? 20 : 16,
+          cellPaddingBlockSM: isPhone ? 8 : 10,
+          cellPaddingBlockMD: isPhone ? 10 : 12,
+          cellPaddingBlock: isUltraWide ? 14 : 12,
+          selectionColumnWidth: isPhone ? 44 : 52
+        }
+      }
+    };
+  }, [isDarkMode, isPhone, isUltraWide]);
 
   const antdInput = useMemo(() => ({ autoComplete: "new-password" }), []);
+  const antdTable = useMemo(() => ({ scroll: { x: "max-content" } }), []);
+  const antdPagination = useMemo(
+    () => ({
+      showSizeChanger: !isPhone,
+      totalBoundaryShowSizeChanger: 100
+    }),
+    [isPhone]
+  );
 
   const antdForm = useMemo(
     () => ({
@@ -122,7 +159,16 @@ function AppContainer() {
   return (
     <CookiesProvider>
       <ApolloProvider client={client}>
-        <ConfigProvider input={antdInput} locale={enLocale} theme={theme} form={antdForm}>
+        <ConfigProvider
+          input={antdInput}
+          locale={enLocale}
+          theme={theme}
+          form={antdForm}
+          table={antdTable}
+          pagination={antdPagination}
+          componentSize={isPhone ? "small" : isUltraWide ? "large" : "middle"}
+          popupOverflow="viewport"
+        >
           <GlobalLoadingBar />
           <SplitFactoryProvider config={config}>
             <SplitClientProvider>