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.

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: {} };
+      },
+    }),
+  },
 });