fix(frontend): Minor UI changes; Align badges & buttons on LibraryV1 (#9512)

<!-- Clearly explain the need for these changes: -->

### Changes 🏗️

While V2 Library is coming, this has been my pet peeve

<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/39c0b84e-4dfe-44e1-b455-cd0330ae7222"
/>

to

<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/ab41973b-8ce8-4772-a4ab-e0dcd8b75464"
/>


### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

autogpt_platform/frontend/src/components/monitor/FlowInfo.tsx

@@ -18,11 +18,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { ClockIcon, ExitIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import {
+  ClockIcon,
+  ExitIcon,
+  Pencil2Icon,
+  PlayIcon,
+  TrashIcon,
+} from "@radix-ui/react-icons";
 import Link from "next/link";
 import { exportAsJSONFile, filterBlocksByType } from "@/lib/utils";
 import { FlowRunsStats } from "@/components/monitor/index";
-import { Trash2Icon } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -180,14 +185,11 @@ export const FlowInfo: React.FC<
 
   return (
     <Card {...props}>
-      <CardHeader className="flex-row justify-between space-x-3 space-y-0">
-        <div>
-          <CardTitle>
-            {flow.name}{" "}
-            <span className="font-light">v{flow.agent_version}</span>
-          </CardTitle>
-        </div>
-        <div className="flex items-start space-x-2">
+      <CardHeader className="">
+        <CardTitle>
+          {flow.name} <span className="font-light">v{flow.agent_version}</span>
+        </CardTitle>
+        <div className="flex flex-col space-y-2 py-6">
           {(flowVersions?.length ?? 0) > 1 && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -258,14 +260,16 @@ export const FlowInfo: React.FC<
             disabled={isDisabled}
             title={!isRunning ? "Run Agent" : "Stop Agent"}
           >
+            <PlayIcon className="mr-2" />
             {isRunning ? "Stop Agent" : "Run Agent"}
           </Button>
           <Button
-            variant="outline"
+            variant="destructive"
             onClick={() => setIsDeleteModalOpen(true)}
             data-testid="delete-button"
           >
-            <Trash2Icon className="h-full" />
+            <TrashIcon className="mr-2" />
+            Delete Agent
           </Button>
         </div>
       </CardHeader>

autogpt_platform/frontend/src/components/monitor/FlowRunsList.tsx

@@ -61,7 +61,10 @@ export const FlowRunsList: React.FC<{
                 {moment(execution.started_at).format("HH:mm")}
               </TableCell>
               <TableCell>
-                <FlowRunStatusBadge status={execution.status} />
+                <FlowRunStatusBadge
+                  status={execution.status}
+                  className="w-full justify-center"
+                />
               </TableCell>
               <TableCell>{formatDuration(execution.duration)}</TableCell>
             </TableRow>