fix(ui): add custom xxl modal size to prevent overflow on small screens

Hardcoded size: 1200 could overflow on narrow viewports. Add a custom
"xxl" size (75rem) to the Mantine Modal theme via a vars resolver.
Mantine caps modal width at 100vw so it naturally adapts on mobile.
Use "xxl" in item-select, app-select, and integration-select modals.

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -70,7 +70,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   );
 }).withOptions({
   defaultTitle: (t) => t("item.create.title"),
-  size: 1200,
+  size: "xxl",
 });
 
 const WidgetItem = ({

apps/nextjs/src/components/integration/integration-select-modal.tsx

@@ -52,5 +52,5 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
   return <IntegrationSelectGrid onSelect={handleSelect} enableMockIntegration={innerProps.enableMockIntegration} />;
 }).withOptions({
   defaultTitle: (t) => t("integration.action.create"),
-  size: 1200,
+  size: "xxl",
 });

packages/modals-collection/src/apps/app-select-modal.tsx

@@ -151,5 +151,5 @@ export const AppSelectModal = createModal<AppSelectModalProps>(({ actions, inner
   );
 }).withOptions({
   defaultTitle: (t) => t("app.action.select.title"),
-  size: 1200,
+  size: "xxl",
 });

packages/ui/src/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from "@mantine/core";
+import { createTheme, Modal } from "@mantine/core";
 
 import { primaryColor } from "./theme/colors/primary";
 import { secondaryColor } from "./theme/colors/secondary";
@@ -9,4 +9,14 @@ export const theme = createTheme({
     secondaryColor,
   },
   primaryColor: "primaryColor",
+  components: {
+    Modal: Modal.extend({
+      vars: (_theme, props) => {
+        if (props.size === "xxl") {
+          return { root: { "--modal-size": "75rem" } };
+        }
+        return { root: {} };
+      },
+    }),
+  },
 });