From 5fdaa9a808fc2bc54fc20a3c3e8a4b33f6682ed3 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Tue, 4 Jun 2024 01:45:20 -0700
Subject: [PATCH] make overflowing tags wrap

---
 frontend/src/components/resources/alerter/table.tsx | 10 ++--------
 frontend/src/components/resources/build/table.tsx   | 10 ++--------
 frontend/src/components/resources/builder/table.tsx | 10 ++--------
 .../src/components/resources/deployment/table.tsx   | 10 ++--------
 .../src/components/resources/procedure/table.tsx    | 10 ++--------
 frontend/src/components/resources/repo/table.tsx    | 10 ++--------
 .../components/resources/server-template/table.tsx  | 10 ++--------
 frontend/src/components/resources/server/table.tsx  | 10 ++--------
 frontend/src/components/tags/index.tsx              | 13 ++++++++++++-
 frontend/src/pages/resource.tsx                     |  2 +-
 10 files changed, 29 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/resources/alerter/table.tsx b/frontend/src/components/resources/alerter/table.tsx
index a0870cdf2..0612a0ce3 100644
--- a/frontend/src/components/resources/alerter/table.tsx
+++ b/frontend/src/components/resources/alerter/table.tsx
@@ -1,7 +1,7 @@
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 
 export const AlerterTable = ({ search }: { search?: string }) => {
   const alerters = useRead("ListAlerters", {}).data;
@@ -28,13 +28,7 @@ export const AlerterTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/build/table.tsx b/frontend/src/components/resources/build/table.tsx
index 7c68fac75..d5d462050 100644
--- a/frontend/src/components/resources/build/table.tsx
+++ b/frontend/src/components/resources/build/table.tsx
@@ -1,4 +1,4 @@
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { fmt_version } from "@lib/formatting";
@@ -45,13 +45,7 @@ export const BuildTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/builder/table.tsx b/frontend/src/components/resources/builder/table.tsx
index 349096669..0d9dae8b6 100644
--- a/frontend/src/components/resources/builder/table.tsx
+++ b/frontend/src/components/resources/builder/table.tsx
@@ -1,7 +1,7 @@
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { BuilderInstanceType } from ".";
 
 export const BuilderTable = ({ search }: { search?: string }) => {
@@ -36,13 +36,7 @@ export const BuilderTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/deployment/table.tsx b/frontend/src/components/resources/deployment/table.tsx
index a3779391d..a67051b4e 100644
--- a/frontend/src/components/resources/deployment/table.tsx
+++ b/frontend/src/components/resources/deployment/table.tsx
@@ -1,4 +1,4 @@
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { Types } from "@monitor/client";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { useFilterResources, useRead } from "@lib/hooks";
@@ -83,13 +83,7 @@ export const DeploymentTable = ({
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/procedure/table.tsx b/frontend/src/components/resources/procedure/table.tsx
index f96164d6b..795c3c60e 100644
--- a/frontend/src/components/resources/procedure/table.tsx
+++ b/frontend/src/components/resources/procedure/table.tsx
@@ -1,6 +1,6 @@
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { ResourceLink } from "../common";
 import { ProcedureComponents } from ".";
 
@@ -38,13 +38,7 @@ export const ProcedureTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/repo/table.tsx b/frontend/src/components/resources/repo/table.tsx
index a02168742..9f39bde7b 100644
--- a/frontend/src/components/resources/repo/table.tsx
+++ b/frontend/src/components/resources/repo/table.tsx
@@ -1,7 +1,7 @@
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { RepoComponents } from ".";
 import { Types } from "@monitor/client";
 import { useCallback } from "react";
@@ -73,13 +73,7 @@ export const RepoTable = ({
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/server-template/table.tsx b/frontend/src/components/resources/server-template/table.tsx
index 14c19ae55..1df4e0635 100644
--- a/frontend/src/components/resources/server-template/table.tsx
+++ b/frontend/src/components/resources/server-template/table.tsx
@@ -1,7 +1,7 @@
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ResourceLink } from "../common";
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 
 export const ServerTemplateTable = ({ search }: { search?: string }) => {
   const server_templates = useRead("ListServerTemplates", {}).data;
@@ -34,13 +34,7 @@ export const ServerTemplateTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/resources/server/table.tsx b/frontend/src/components/resources/server/table.tsx
index 09eb5e420..a8061c25c 100644
--- a/frontend/src/components/resources/server/table.tsx
+++ b/frontend/src/components/resources/server/table.tsx
@@ -1,4 +1,4 @@
-import { TagsWithBadge } from "@components/tags";
+import { TableTags } from "@components/tags";
 import { useFilterResources, useRead } from "@lib/hooks";
 import { DataTable, SortableHeader } from "@ui/data-table";
 import { ServerComponents } from ".";
@@ -58,13 +58,7 @@ export const ServerTable = ({ search }: { search?: string }) => {
         },
         {
           header: "Tags",
-          cell: ({ row }) => {
-            return (
-              <div className="flex gap-1">
-                <TagsWithBadge tag_ids={row.original.tags} />
-              </div>
-            );
-          },
+          cell: ({ row }) => <TableTags tag_ids={row.original.tags} />,
         },
       ]}
     />
diff --git a/frontend/src/components/tags/index.tsx b/frontend/src/components/tags/index.tsx
index 2d9c5de06..6931f2c9a 100644
--- a/frontend/src/components/tags/index.tsx
+++ b/frontend/src/components/tags/index.tsx
@@ -167,7 +167,10 @@ export const TagsWithBadge = ({
         <Badge
           key={tag_id}
           variant="secondary"
-          className={cn("gap-2 px-1.5 py-0.5 cursor-pointer", className)}
+          className={cn(
+            "gap-2 px-1.5 py-0.5 cursor-pointer text-nowrap",
+            className
+          )}
           onClick={() => onBadgeClick && onBadgeClick(tag_id)}
         >
           {get_name(tag_id)}
@@ -178,6 +181,14 @@ export const TagsWithBadge = ({
   );
 };
 
+export const TableTags = ({ tag_ids }: { tag_ids: string[] }) => {
+  return (
+    <div className="flex gap-1 flex-wrap">
+      <TagsWithBadge tag_ids={tag_ids} />
+    </div>
+  );
+};
+
 export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
   const { toast } = useToast();
 
diff --git a/frontend/src/pages/resource.tsx b/frontend/src/pages/resource.tsx
index 663018cd8..bf802061a 100644
--- a/frontend/src/pages/resource.tsx
+++ b/frontend/src/pages/resource.tsx
@@ -62,7 +62,7 @@ export const Resource = () => {
         </div>
       }
       actions={
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 items-end">
           <div className="flex gap-2 items-center lg:justify-end">
             <div className="text-muted-foreground">tags:</div>
             <ResourceTags