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

2026-01-20 17:34:19 +00:00
parent 36bbe809fa
commit 2b95956132
3 changed files with 7 additions and 2 deletions
--- a/packages/ui/src/components/dialog.css
+++ b/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 {
--- a/packages/ui/src/components/dialog.tsx
+++ b/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