fix: dialog width

risc0 · Jun 12, 2024 · 77db2ca · 77db2ca
1 parent 29ecd7d
commit 77db2ca
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-43.76%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-72.3%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-50%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-43.76%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-44.22%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-72.3%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-50%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-44.22%25-red.svg?style=flat) |
diff --git a/credenza.tsx b/credenza.tsx
@@ -47,89 +47,61 @@ const Credenza = ({ children, ...props }: RootCredenzaProps) => {
   return <Credenza {...props}>{children}</Credenza>;
 };
 
-const CredenzaTrigger = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaTrigger = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaTrigger = isDesktop ? DialogTrigger : DrawerTrigger;
 
-  return (
-    <CredenzaTrigger className={className} {...props}>
-      {children}
-    </CredenzaTrigger>
-  );
+  return <CredenzaTrigger {...rest}>{children}</CredenzaTrigger>;
 };
 
-const CredenzaClose = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaClose = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaClose = isDesktop ? DialogClose : DrawerClose;
 
-  return (
-    <CredenzaClose className={className} {...props}>
-      {children}
-    </CredenzaClose>
-  );
+  return <CredenzaClose {...rest}>{children}</CredenzaClose>;
 };
 
-const CredenzaContent = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaContent = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaContent = isDesktop ? DialogContent : DrawerContent;
 
-  return (
-    <CredenzaContent className={className} {...props}>
-      {children}
-    </CredenzaContent>
-  );
+  return <CredenzaContent {...rest}>{children}</CredenzaContent>;
 };
 
-const CredenzaDescription = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaDescription = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaDescription = isDesktop ? DialogDescription : DrawerDescription;
 
-  return (
-    <CredenzaDescription className={className} {...props}>
-      {children}
-    </CredenzaDescription>
-  );
+  return <CredenzaDescription {...rest}>{children}</CredenzaDescription>;
 };
 
-const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaHeader = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaHeader = isDesktop ? DialogHeader : DrawerHeader;
 
-  return (
-    <CredenzaHeader className={className} {...props}>
-      {children}
-    </CredenzaHeader>
-  );
+  return <CredenzaHeader {...rest}>{children}</CredenzaHeader>;
 };
 
-const CredenzaTitle = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaTitle = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaTitle = isDesktop ? DialogTitle : DrawerTitle;
 
-  return (
-    <CredenzaTitle className={className} {...props}>
-      {children}
-    </CredenzaTitle>
-  );
+  return <CredenzaTitle {...rest}>{children}</CredenzaTitle>;
 };
 
-const CredenzaBody = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaBody = ({ className, children, ...rest }: CredenzaProps) => {
   return (
-    <div className={cn("px-4 md:px-0", className)} {...props}>
+    <div className={cn("px-4 md:px-0", className)} {...rest}>
       {children}
     </div>
   );
 };
 
-const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
+const CredenzaFooter = ({ children, ...rest }: CredenzaProps) => {
   const isDesktop = useMediaQuery(desktop);
   const CredenzaFooter = isDesktop ? DialogFooter : DrawerFooter;
 
-  return (
-    <CredenzaFooter className={className} {...props}>
-      {children}
-    </CredenzaFooter>
-  );
+  return <CredenzaFooter {...rest}>{children}</CredenzaFooter>;
 };
 
 export {

diff --git a/dialog.tsx b/dialog.tsx
@@ -30,7 +30,7 @@ const DialogContent = forwardRef<
       data-testid="dialog-content"
       ref={ref}
       className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-5rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg",
         className,
       )}
       {...rest}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "sideEffects": false,
   "type": "module",
   "scripts": {

diff --git a/styles/globals.css b/styles/globals.css
@@ -91,8 +91,8 @@
 }
 
 html {
-  /* prevent layout shifts when the scrollbar appears, on both sides */
-  scrollbar-gutter: stable both-edges;
+  /* prevent layout shifts when the scrollbar appears */
+  scrollbar-gutter: stable;
 }
 
 body[style] {