diff --git a/src/components/ui/MetaData.tsx b/src/components/ui/MetaData.tsx
index 8628041f..e5b512e6 100644
--- a/src/components/ui/MetaData.tsx
+++ b/src/components/ui/MetaData.tsx
@@ -51,7 +51,7 @@ export function renderAttributes(
         >
           {key}:
         </div>
-        <div className="font-mono whitespace-pre-wrap break-words"
+        <div className="font-mono whitespace-pre-wrap break-words md:col-start-2 md:row-start-auto pl-4 md:pl-0"
           style={{ overflowWrap: 'anywhere' }}
         >
           {typeof value === 'object' ? JSON.stringify(value) : String(value)}
@@ -88,7 +88,7 @@ const Metadata = ({ data }: { data: Record<string, any> }) => {
                         <DialogTitle>Attributes</DialogTitle>
                     </DialogHeader>
                         <div className="max-h-[60vh] text-[12px] overflow-y-auto break-words p-0">
-                            <div className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-[6px]">
+                            <div className="grid grid-cols-1 md:grid-cols-[max-content_1fr] gap-x-3 gap-y-[6px]">
                                 {renderAttributes(data, defaultAttributes)}
                             </div>
                         </div>
diff --git a/src/components/ui/css/MetaData.css b/src/components/ui/css/MetaData.css
index 7fc4b62e..dcf9dd3c 100644
--- a/src/components/ui/css/MetaData.css
+++ b/src/components/ui/css/MetaData.css
@@ -7,7 +7,7 @@
 }
 
 .metadata-dialog {
-    max-width: 90vw;
+    max-width: 95vw;
     max-height: 90vh;
     width: 768px;
 }