fix: correctly trim operation name on insights and add popover title (#6909)

Author: jdolle

.changeset/old-timers-mate.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Correctly trim operation name on insights and add popover title

packages/web/app/src/components/target/insights/List.tsx

@@ -6,6 +6,7 @@ import { useDebouncedCallback } from 'use-debounce';
 import { Scale, Section } from '@/components/common';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Link } from '@/components/ui/link';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Sortable, Table, TBody, Td, Th, THead, Tr } from '@/components/v2';
 import { env } from '@/env/frontend';
@@ -14,7 +15,6 @@ import { DateRangeInput } from '@/gql/graphql';
 import { useDecimal, useFormattedDuration, useFormattedNumber } from '@/lib/hooks';
 import { pick } from '@/lib/object';
 import { ChevronUpIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { Link } from '@tanstack/react-router';
 import {
   createColumnHelper,
   flexRender,
@@ -68,7 +68,7 @@ function OperationRow({
       <Tr>
         <Td className="font-medium">
           <div className="flex items-center gap-2">
-            <Button variant="orangeLink" className="h-auto p-0" asChild>
+            <Button variant="orangeLink" className="h-auto p-0" asChild title={operation.name}>
               <Link
                 className="block max-w-[300px] truncate"
                 to="/$organizationSlug/$projectSlug/$targetSlug/insights/$operationName/$operationHash"
@@ -234,7 +234,12 @@ function OperationsTable({
   const sortedColumnsById = tableInstance.getState().sorting.map(s => s.id);
 
   return (
-    <div className={clsx('rounded-md border border-gray-800 bg-gray-900/50 p-5', className)}>
+    <div
+      className={clsx(
+        'overflow-x-scroll rounded-md border border-gray-800 bg-gray-900/50 p-5',
+        className,
+      )}
+    >
       <Section.Title>Operations</Section.Title>
       <Section.Subtitle>List of all operations with their statistics</Section.Subtitle>