fix(snippet-id): improve provider ID readability in tables (#6615)

ui/components/providers/table/column-providers.tsx

@@ -70,7 +70,7 @@ export const ColumnProviders: ColumnDef<ProviderProps>[] = [
       const {
         attributes: { uid },
       } = getProviderData(row);
-      return <SnippetId className="h-7 max-w-48" entityId={uid} />;
+      return <SnippetId className="h-7" entityId={uid} />;
     },
   },
   {

ui/components/ui/entities/snippet-id.tsx

@@ -1,4 +1,4 @@
-import { Snippet } from "@nextui-org/react";
+import { Snippet, Tooltip } from "@nextui-org/react";
 import React from "react";
 
 import { CopyIcon, DoneIcon, IdIcon } from "@/components/icons";
@@ -10,7 +10,7 @@ interface SnippetIdProps {
 export const SnippetId: React.FC<SnippetIdProps> = ({ entityId, ...props }) => {
   return (
     <Snippet
-      className="flex h-4 items-center py-0"
+      className="flex h-6 items-center py-0"
       color="default"
       size="sm"
       variant="flat"
@@ -22,9 +22,11 @@ export const SnippetId: React.FC<SnippetIdProps> = ({ entityId, ...props }) => {
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={18} />
-        <span className="no-scrollbar w-14 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-xs">
-          {entityId}
-        </span>
+        <Tooltip content={entityId} placement="top">
+          <span className="no-scrollbar w-24 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-xs">
+            {entityId}
+          </span>
+        </Tooltip>
       </p>
     </Snippet>
   );