From 3456df4cf1b8a92adb0312c38f21ac0bcd31afd2 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 20 Jan 2025 17:23:19 +0100
Subject: [PATCH] fix(snippet-id): improve provider ID readability in tables
 (#6615)

---
 ui/components/providers/table/column-providers.tsx |  2 +-
 ui/components/ui/entities/snippet-id.tsx           | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/components/providers/table/column-providers.tsx b/ui/components/providers/table/column-providers.tsx
index 8933798935..f31c199920 100644
--- a/ui/components/providers/table/column-providers.tsx
+++ b/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} />;
     },
   },
   {
diff --git a/ui/components/ui/entities/snippet-id.tsx b/ui/components/ui/entities/snippet-id.tsx
index 809e73088a..c485763070 100644
--- a/ui/components/ui/entities/snippet-id.tsx
+++ b/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>
   );