Fix up export dialog

src-web/components/ExportDataDialog.tsx

@@ -84,7 +84,8 @@ function ExportDataDialogContent({
   const numSelected = Object.values(selectedWorkspaces).filter(Boolean).length;
   const noneSelected = numSelected === 0;
   return (
-    <VStack space={3} className="w-full mb-3 px-4">
+    <div className="w-full grid grid-rows-[minmax(0,1fr)_auto]">
+      <VStack space={3} className="overflow-auto px-5 pb-6">
         <table className="w-full mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
           <thead>
             <tr>
@@ -116,7 +117,9 @@ function ExportDataDialogContent({
                 </td>
                 <td
                   className="py-1 pl-4 text whitespace-nowrap overflow-x-auto hide-scrollbars"
-                onClick={() => setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))}
+                  onClick={() =>
+                    setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))
+                  }
                 >
                   {w.name} {w.id === activeWorkspace.id ? '(current workspace)' : ''}
                 </td>
@@ -132,15 +135,19 @@ function ExportDataDialogContent({
             help='Environments marked as "sharable" will be exported by default'
           />
         </DetailsBanner>
-      <div className="grid grid-cols-[1fr_auto] items-center mt-6 pb-1.5">
+      </VStack>
+      <footer className="px-5 grid grid-cols-[1fr_auto] items-center bg-surface-highlight py-2 border-t border-border-subtle">
         <div>
-          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtle">Create Run Button</Link>
+          <Link href="https://yaak.app/button/new" noUnderline className="text-text-subtle">
+            Create Run Button
+          </Link>
         </div>
         <HStack space={2} justifyContent="end">
-          <Button className="focus" variant="border" onClick={onHide}>
+          <Button size="sm" className="focus" variant="border" onClick={onHide}>
             Cancel
           </Button>
           <Button
+            size="sm"
             type="submit"
             className="focus"
             color="primary"
@@ -151,7 +158,7 @@ function ExportDataDialogContent({
             {pluralizeCount('Workspace', numSelected, { omitSingle: true, noneWord: 'Nothing' })}
           </Button>
         </HStack>
+      </footer>
     </div>
-    </VStack>
   );
 }

src-web/components/core/DetailsBanner.tsx

@@ -21,10 +21,12 @@ export function DetailsBanner({ className, color, summary, children, ...extraPro
               'w-0 h-0 border-t-[0.3em] border-b-[0.3em] border-l-[0.5em] border-r-0',
               'border-t-transparent border-b-transparent border-l-text-subtle',
             )}
-          ></div>
+          />
           {summary}
         </summary>
+        <div className="mt-1.5">
         {children}
+        </div>
       </details>
     </Banner>
   );