fix dialog content width

ensdomains · Jan 26, 2025 · d30b0cb · d30b0cb
1 parent 61599ea
commit d30b0cb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/components/src/components/organisms/Dialog/DialogContent.tsx b/components/src/components/organisms/Dialog/DialogContent.tsx
@@ -63,8 +63,8 @@ const Container = forwardRef<
           ? '80vw'
           : `calc(80vw - 2 * ${space['6']} + 2 * ${space[$horizontalPadding]})`,
         [styles.dialogContentWidth]: $fullWidth
-          ? `width: calc(100% + 2 * ${space['4']});`
-          : `width: calc(100% + 2 * ${space[$horizontalPadding]})`,
+          ? `calc(100% + 2 * ${space['4']});`
+          : `calc(100% + 2 * ${space[$horizontalPadding]})`,
         [styles.dialogContentMaxWidthSm]: `calc(${space['128']} + 2 * ${space[$horizontalPadding]})`,
       }),
       ...style,

diff --git a/docs/src/reference/mdx/organisms/Dialog.docs.mdx b/docs/src/reference/mdx/organisms/Dialog.docs.mdx
@@ -11,14 +11,19 @@ import { Dialog } from '@ensdomains/thorin'
 <>
   <Button onClick={() => toggleState('dialog')}>Open Dialog</Button>
   <Dialog
-    alert="info"
     currentStep={1}
     open={getState('dialog')}
     subtitle="Dialog Subtitle"
     title="Dialog Title"
     onDismiss={() => toggleState('dialog')}
   >
-    <Typography>Dialog text content.</Typography>
+    <Dialog.Content>
+      <Typography>Dialog text content.</Typography>
+    </Dialog.Content>
+    <Dialog.Footer
+      leading={<Button colorStyle="accentSecondary">Leading</Button>}
+      trailing={<Button>Trailing</Button>}
+    />
   </Dialog>
 </>
 ```