feat: add titles (show on hover) to truncate-able columns in console …

…tables (#2465)

The Content column in the timeline table can be truncated when the
browser window is small, but doesn't display its contents on hover.

#2460

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

frontend/src/features/timeline/TimelineCall.tsx

@@ -2,8 +2,9 @@ import type { CallEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb
 import { verbRefString } from '../verbs/verb.utils'
 
 export const TimelineCall = ({ call }: { call: CallEvent }) => {
+  const title = `${call.sourceVerbRef?.module ? `${verbRefString(call.sourceVerbRef)} -> ` : ''}${call.destinationVerbRef ? verbRefString(call.destinationVerbRef) : ''}`
   return (
-    <span>
+    <span title={title}>
       {call.sourceVerbRef?.module && (
         <>
           <span className='text-indigo-500 dark:text-indigo-300'>{verbRefString(call.sourceVerbRef)}</span>

frontend/src/features/timeline/TimelineDeploymentCreated.tsx

@@ -1,10 +1,11 @@
 import type { DeploymentCreatedEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
 export const TimelineDeploymentCreated = ({ deployment }: { deployment: DeploymentCreatedEvent }) => {
+  const title = `Created deployment ${deployment.key} for language ${deployment.language}`
   return (
-    <>
+    <span title={title}>
       Created deployment <span className='text-indigo-500 dark:text-indigo-300'>{deployment.key}</span> for language{' '}
       <span className='text-indigo-500 dark:text-indigo-300'>{deployment.language}</span>
-    </>
+    </span>
   )
 }

frontend/src/features/timeline/TimelineDeploymentUpdated.tsx

@@ -1,11 +1,12 @@
 import type { DeploymentUpdatedEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
 export const TimelineDeploymentUpdated = ({ deployment }: { deployment: DeploymentUpdatedEvent }) => {
+  const title = `Updated deployment ${deployment.key} min replicas to ${deployment.minReplicas} (previously ${deployment.prevMinReplicas})`
   return (
-    <>
+    <span title={title}>
       Updated deployment <span className='text-indigo-500 dark:text-indigo-300'>{deployment.key}</span> min replicas to{' '}
       <span className='text-indigo-500 dark:text-indigo-300'>{deployment.minReplicas}</span> (previously{' '}
       <span className='text-indigo-500 dark:text-indigo-300'>{deployment.prevMinReplicas}</span>)
-    </>
+    </span>
   )
 }

frontend/src/features/timeline/TimelineLog.tsx

@@ -1,5 +1,5 @@
 import type { LogEvent } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
 export const TimelineLog = ({ log }: { log: LogEvent }) => {
-  return <span>{log.message}</span>
+  return <span title={log.message}>{log.message}</span>
 }