add x-large dialog size and use it for settings modal

packages/app/src/components/dialog-settings.tsx

@@ -13,7 +13,7 @@ import { SettingsMcp } from "./settings-mcp"
 
 export const DialogSettings: Component = () => {
   return (
-    <Dialog size="large">
+    <Dialog size="x-large">
       <Tabs orientation="vertical" variant="settings" defaultValue="general" class="h-full settings-dialog">
         <Tabs.List>
           <div

packages/ui/src/components/dialog.css

@@ -143,6 +143,11 @@
     width: min(calc(100vw - 32px), 800px);
     height: min(calc(100vh - 32px), 600px);
   }
+
+  &[data-size="x-large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 960px);
+    height: min(calc(100vh - 32px), 600px);
+  }
 }
 
 @keyframes overlayShow {

packages/ui/src/components/dialog.tsx

@@ -6,7 +6,7 @@ export interface DialogProps extends ParentProps {
   title?: JSXElement
   description?: JSXElement
   action?: JSXElement
-  size?: "normal" | "large"
+  size?: "normal" | "large" | "x-large"
   class?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   fit?: boolean