fix button spacing and delete modal autosizing

wandb · Dec 11, 2024 · e7ced6c · e7ced6c
1 parent f0015a3
commit e7ced6c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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>