chore(buddybook): fix modal CSS

waku-org · Nov 5, 2024 · 9239b80 · 9239b80
1 parent cc56298
commit 9239b80
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/examples/buddybook/src/components/Chain/Create/CreationPreview.tsx b/examples/buddybook/src/components/Chain/Create/CreationPreview.tsx
@@ -165,7 +165,7 @@ const ChainCreationForm: React.FC = () => {
         </form>
       </CardContent>
       <Dialog open={showModal} onOpenChange={handleCloseModal}>
-        <DialogContent>
+        <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle>{isSuccess ? "Chain Created" : "Chain Preview"}</DialogTitle>
           </DialogHeader>

diff --git a/examples/buddybook/src/components/Chain/View/ChainList.tsx b/examples/buddybook/src/components/Chain/View/ChainList.tsx
@@ -42,7 +42,7 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
                 <p>{block.description}</p>
                 <div className="flex flex-col space-y-2 mt-2">
                   <p className="text-sm text-muted-foreground">
-                    Created by: <SignerName address={block.signatures[0].address} />
+                    <SignerName address={block.signatures[0].address} prefix="Created by" />
                   </p>
                   <p className="text-sm text-muted-foreground">
                     Created at: {new Date(block.timestamp).toLocaleString()}
@@ -88,7 +88,9 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
             </Card>
           ) : (
             <div className="flex-grow">
-              <SignerName address={block.signatures[0].address} />
+              <p className="text-sm">
+                <SignerName address={block.signatures[0].address} prefix="Signed by" />
+              </p>
             </div>
           )}
         </div>
@@ -129,13 +131,13 @@ const ChainList: React.FC<ChainListProps> = ({ chainsData, onChainUpdate, isLoad
   );
 };
 
-const SignerName: React.FC<{ address: `0x${string}` }> = ({ address }) => {
+const SignerName: React.FC<{ address: `0x${string}`; prefix?: string }> = ({ address, prefix }) => {
   const { data: ensName } = useEnsName({ address })
 
   return (
-    <p className="text-sm">
-      Signed by: {ensName || `${address.slice(0, 6)}...${address.slice(-4)}`}
-    </p>
+    <span className="text-sm">
+      {prefix && `${prefix}: `}{ensName || `${address.slice(0, 6)}...${address.slice(-4)}`}
+    </span>
   );
 };
 

diff --git a/examples/buddybook/src/components/ui/dialog.tsx b/examples/buddybook/src/components/ui/dialog.tsx
@@ -31,15 +31,19 @@ const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Content
-    ref={ref}
-    className={cn(
-      "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
-      "max-h-[85vh] overflow-y-auto",
-      className
-    )}
-    {...props}
-  />
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+        "rounded-lg",
+        "max-h-[85vh] overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  </DialogPortal>
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName