chore: tweak styles for entity info short component

components/ui/entities/entity-info-short.tsx

@@ -7,6 +7,7 @@ import {
   KS8ProviderBadge,
 } from "../../icons/providers-badge";
 import { SnippetId } from "./snippet-id";
+import { SnippetLabel } from "./snippet-label";
 
 interface EntityInfoProps {
   connected?: boolean | null;
@@ -36,16 +37,12 @@ export const EntityInfoShort: React.FC<EntityInfoProps> = ({
   };
 
   return (
-    <div className="max-w-full">
-      <div className="flex items-center justify-between space-x-4">
-        <div className="flex items-center space-x-4">
-          <div className="flex-shrink-0">{getProviderLogo()}</div>
-          <div className="flex flex-col">
-            <span className="text-md max-w-24 overflow-hidden text-ellipsis font-semibold lg:max-w-36">
-              {entityAlias}
-            </span>
-            <SnippetId className="h-5 max-w-44" entityId={entityId ?? ""} />
-          </div>
+    <div className="flex w-full items-center justify-between space-x-4">
+      <div className="flex items-center gap-x-4">
+        <div className="flex-shrink-0">{getProviderLogo()}</div>
+        <div className="flex flex-col">
+          <SnippetLabel label={entityAlias ?? ""} />
+          <SnippetId entityId={entityId ?? ""} />
         </div>
       </div>
     </div>

components/ui/entities/index.ts

@@ -2,3 +2,4 @@ export * from "./date-with-time";
 export * from "./entity-info-short";
 export * from "./scan-status";
 export * from "./snippet-id";
+export * from "./snippet-label";

components/ui/entities/snippet-id.tsx

@@ -10,7 +10,7 @@ interface SnippetIdProps {
 export const SnippetId: React.FC<SnippetIdProps> = ({ entityId, ...props }) => {
   return (
     <Snippet
-      className="flex items-center py-0"
+      className="flex h-6 items-center py-0"
       color="default"
       size="sm"
       variant="flat"
@@ -22,7 +22,7 @@ export const SnippetId: React.FC<SnippetIdProps> = ({ entityId, ...props }) => {
     >
       <p className="flex items-center space-x-2">
         <IdIcon size={18} />
-        <span className="no-scrollbar max-w-16 overflow-x-scroll text-sm">
+        <span className="no-scrollbar text-md w-28 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
           {entityId}
         </span>
       </p>

components/ui/entities/snippet-label.tsx

@@ -0,0 +1,30 @@
+import { Snippet } from "@nextui-org/react";
+import React from "react";
+
+import { CopyIcon, DoneIcon } from "@/components/icons";
+
+interface SnippetLabelProps {
+  label: string;
+  [key: string]: any;
+}
+export const SnippetLabel: React.FC<SnippetLabelProps> = ({
+  label,
+  ...props
+}) => {
+  return (
+    <Snippet
+      className="m-0 flex items-center bg-transparent py-0"
+      color="default"
+      size="sm"
+      radius="lg"
+      hideSymbol
+      copyIcon={<CopyIcon size={16} />}
+      checkIcon={<DoneIcon size={16} />}
+      {...props}
+    >
+      <p className="no-scrollbar text-md mb-1 w-32 overflow-hidden overflow-x-scroll text-ellipsis whitespace-nowrap text-sm font-semibold">
+        {label}
+      </p>
+    </Snippet>
+  );
+};