From e7ced6c8e365535e66e2559a29edca051889b165 Mon Sep 17 00:00:00 2001
From: gtarpenning <griffin.tarpenning@wandb.com>
Date: Wed, 11 Dec 2024 10:59:46 -0800
Subject: [PATCH] fix button spacing and delete modal autosizing

---
 .../Home/Browse3/pages/ObjectVersionPage.tsx     |  9 ++++-----
 .../Home/Browse3/pages/OpVersionPage.tsx         |  5 ++---
 .../Home/Browse3/pages/common/DeleteModal.tsx    | 16 +++++++++++-----
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
index 8b4119f8cca..14aafb9893c 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectVersionPage.tsx
@@ -215,7 +215,7 @@ const ObjectVersionPageInner: React.FC<{
       }
       headerContent={
         <Tailwind>
-          <div className="grid w-full auto-cols-max grid-flow-col gap-[16px] text-[14px]">
+          <div className="grid w-full grid-flow-col grid-cols-[auto_auto_1fr_auto] gap-[16px] text-[14px]">
             <div className="block">
               <p className="text-moon-500">Name</p>
               <div className="flex items-center">
@@ -256,10 +256,9 @@ const ObjectVersionPageInner: React.FC<{
                 <p>{refExtra}</p>
               </div>
             )}
-          </div>
-          <div className="flex-grow" />
-          <div className="ml-1 flex">
-            <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+            <div className="ml-auto">
+              <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+            </div>
           </div>
         </Tailwind>
       }
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/OpVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/OpVersionPage.tsx
index ad729fd9e29..13c878f0c8c 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/OpVersionPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/OpVersionPage.tsx
@@ -77,7 +77,7 @@ const OpVersionPageInner: React.FC<{
       title={opVersionText(opId, versionIndex)}
       headerContent={
         <Tailwind>
-          <div className="grid w-full auto-cols-max grid-flow-col gap-[16px] text-[14px]">
+          <div className="grid w-full grid-flow-col grid-cols-[auto_auto_1fr_auto] gap-[16px] text-[14px]">
             <div className="block">
               <p className="text-moon-500">Name</p>
               <div className="flex items-center">
@@ -139,8 +139,7 @@ const OpVersionPageInner: React.FC<{
                 <p>-</p>
               )}
             </div>
-            <div className="flex-grow" />
-            <div className="ml-1 flex">
+            <div className="block">
               <DeleteObjectButtonWithModal objVersionSchema={opVersion} />
             </div>
           </div>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/DeleteModal.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/DeleteModal.tsx
index 24d7b420808..3d6d25b1497 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/DeleteModal.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/common/DeleteModal.tsx
@@ -1,5 +1,5 @@
 import {
-  Dialog,
+  Dialog as MaterialDialog,
   DialogActions as MaterialDialogActions,
   DialogContent as MaterialDialogContent,
   DialogTitle as MaterialDialogTitle,
@@ -24,6 +24,14 @@ interface DeleteModalProps {
   onSuccess?: () => void;
 }
 
+const Dialog = styled(MaterialDialog)`
+  .MuiDialog-paper {
+    min-width: 400px;
+    max-width: min(800px, 90vw);
+    width: auto !important;
+  }
+`;
+
 export const DeleteModal: React.FC<DeleteModalProps> = ({
   open,
   onClose,
@@ -55,12 +63,10 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({
       onClose={() => {
         onClose();
         setError(null);
-      }}
-      maxWidth="xs"
-      fullWidth>
+      }}>
       <Tailwind>
         <DialogTitle>Delete {deleteTargetStr}</DialogTitle>
-        <DialogContent style={{overflow: 'hidden'}}>
+        <DialogContent className="overflow-hidden">
           <div className="mb-16">
             {error != null ? (
               <p style={{color: 'red'}}>{error}</p>