make overflowing tags wrap

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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} />,
         },
       ]}
     />

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();
 

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