harness · ankormoreankor · Sep 3, 2025 · Sep 1, 2025 · Sep 3, 2025 · Sep 3, 2025
diff --git a/packages/ui/src/components/popover.tsx b/packages/ui/src/components/popover.tsx
@@ -11,6 +11,7 @@ import { Link, LinkProps } from './link'
 const PopoverRoot = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
+type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps
 
 const PopoverAnchor = PopoverPrimitive.Anchor
 
@@ -95,4 +96,4 @@ const Popover = Object.assign(PopoverComponent, {
   Anchor: PopoverAnchor
 })
 
-export { Popover }
+export { Popover, PopoverTriggerProps }
diff --git a/packages/ui/src/components/table.tsx b/packages/ui/src/components/table.tsx
@@ -56,7 +56,7 @@ TableRoot.displayName = 'TableRoot'
 
 const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
   ({ className, ...props }, ref) => (
-    <thead ref={ref} className={cn('cn-table-v2-header pointer-events-none select-none', className)} {...props} />
+    <thead ref={ref} className={cn('cn-table-v2-header select-none', className)} {...props} />
   )
 )
 TableHeader.displayName = 'TableHeader'
@@ -230,15 +230,10 @@ const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
 
     if (shouldRenderLink) {
       return (
-        <td ref={ref} className={cn('cn-table-v2-cell !p-0', className)} {...props}>
-          <Link
-            to={to || ''}
-            variant="secondary"
-            {...(linkProps || {})}
-            className={cn('cn-table-v2-cell-link', linkProps?.className)}
-          >
-            {children}
-          </Link>
+        <td ref={ref} className={cn('cn-table-v2-cell', className)} {...props}>
+          <Link to={to || ''} {...(linkProps || {})} className={cn('cn-table-v2-cell-link', linkProps?.className)} />
+
+          {children}
         </td>
       )
     }

diff --git a/packages/ui/src/components/time-ago-card.tsx b/packages/ui/src/components/time-ago-card.tsx
@@ -1,6 +1,6 @@
 import { FC, forwardRef, Fragment, memo, MouseEvent, Ref, useCallback, useState } from 'react'
 
-import { Popover, StatusBadge, Text, TextProps } from '@/components'
+import { Popover, PopoverTriggerProps, StatusBadge, Text, TextProps } from '@/components'
 import { cn } from '@utils/cn'
 import { LOCALE } from '@utils/TimeUtils'
 import { formatDistanceToNow } from 'date-fns'
@@ -143,6 +143,7 @@ interface TimeAgoCardProps {
   }
   triggerClassName?: string
   contentClassName?: string
+  triggerProps?: Omit<PopoverTriggerProps, 'className'>
 }
 
 export const TimeAgoCard = memo(
@@ -156,7 +157,8 @@ export const TimeAgoCard = memo(
         afterCutoffPrefix,
         textProps,
         triggerClassName,
-        contentClassName
+        contentClassName,
+        triggerProps
       },
       ref
     ) => {
@@ -193,7 +195,7 @@ export const TimeAgoCard = memo(
       return (
         <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
           <Popover.Trigger
-            tabIndex={-1}
+            {...triggerProps}
             className={cn('cn-time-ago-card-trigger', triggerClassName)}
             ref={ref}
             onMouseEnter={handleMouseEnter}

diff --git a/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx b/packages/ui/src/views/connectors/connectors-list/connectors-list.tsx
@@ -146,13 +146,13 @@ export function ConnectorsList({
               <Table.Cell className="content-center">
                 {lastModifiedAt ? <TimeAgoCard timestamp={lastModifiedAt} /> : null}
               </Table.Cell>
-              <Table.Cell className="content-center !p-1.5" disableLink>
+              <Table.Cell className="content-center !p-1.5">
                 <Favorite
                   isFavorite={isFavorite}
                   onFavoriteToggle={(favorite: boolean) => onToggleFavoriteConnector(identifier, !favorite)}
                 />
               </Table.Cell>
-              <Table.Cell className="content-center !p-0" disableLink>
+              <Table.Cell className="content-center !p-0">
                 <MoreActionsTooltip
                   actions={[
                     {

diff --git a/packages/ui/src/views/repo/components/summary/summary.tsx b/packages/ui/src/views/repo/components/summary/summary.tsx
@@ -176,18 +176,19 @@ export const Summary = ({
                 {file.lastCommitMessage ? (
                   <Text className="line-clamp-1">{file.lastCommitMessage}</Text>
                 ) : (
-                  <Skeleton.Box className="w-full h-5" />
+                  <Skeleton.Box className="h-5 w-full" />
                 )}
               </Table.Cell>
-              <Table.Cell className="text-right" disableLink>
+              <Table.Cell className="text-right">
                 {file.timestamp ? (
                   <TimeAgoCard
                     timestamp={file.timestamp}
                     dateTimeFormatOptions={{ dateStyle: 'medium' }}
                     textProps={{ color: 'foreground-3', wrap: 'nowrap', align: 'right' }}
+                    triggerProps={{ tabIndex: -1 }}
                   />
                 ) : (
-                  <Skeleton.Box className="w-full h-5" />
+                  <Skeleton.Box className="h-5 w-full" />
                 )}
               </Table.Cell>
             </Table.Row>

diff --git a/packages/ui/src/views/repo/repo-branch/components/branch-list.tsx b/packages/ui/src/views/repo/repo-branch/components/branch-list.tsx
@@ -68,7 +68,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
           <Table.Head className="w-[15%] whitespace-nowrap">
             <Text variant="caption-strong">{t('views:repos.pullRequest', 'Pull Request')}</Text>
           </Table.Head>
-          <Table.Head className="w-[7%]" />
+          <Table.Head className="w-[68px]" />
         </Table.Row>
       </Table.Header>
 
@@ -100,7 +100,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
                 />
               </Table.Cell>
 
-              <Table.Cell disableLink>
+              <Table.Cell>
                 <Layout.Flex align="center" gapX="xs">
                   <AvatarWithTooltip name={branch?.user?.name} src={branch?.user?.avatarUrl} size="xs" rounded />
                   <TimeAgoCard
@@ -138,13 +138,15 @@ export const BranchesList: FC<BranchListPageProps> = ({
               {/* calculated divergence bar & default branch */}
               <Table.Cell>
                 {branch?.behindAhead?.default ? (
-                  <Tag className="m-auto" value={t('views:repos.default', 'Default')} rounded />
+                  <Layout.Flex>
+                    <Tag className="m-auto" value={t('views:repos.default', 'Default')} rounded />
+                  </Layout.Flex>
                 ) : (
                   <DivergenceGauge className="m-auto" behindAhead={branch?.behindAhead || {}} />
                 )}
               </Table.Cell>
 
-              <Table.Cell disableLink>
+              <Table.Cell>
                 {branch.pullRequests && branch.pullRequests.length > 0 && branch.pullRequests[0].number && (
                   <Link
                     noHoverUnderline
@@ -180,7 +182,7 @@ export const BranchesList: FC<BranchListPageProps> = ({
                   </Link>
                 )}
               </Table.Cell>
-              <Table.Cell className="text-right" disableLink>
+              <Table.Cell className="text-right">
                 <MoreActionsTooltip
                   iconName="more-horizontal"
                   actions={[

diff --git a/packages/ui/src/views/repo/repo-tags/components/repo-tags-list.tsx b/packages/ui/src/views/repo/repo-tags/components/repo-tags-list.tsx
@@ -120,11 +120,11 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
       <Table.Header>
         <Table.Row>
           <Table.Head className="w-[15%]">{t('views:repos.tag', 'Tag')}</Table.Head>
-          <Table.Head className="w-[33%]">{t('views:repos.description', 'Description')}</Table.Head>
-          <Table.Head className="w-[15%]">{t('views:repos.commit', 'Commit')}</Table.Head>
+          <Table.Head className="w-[30%]">{t('views:repos.description', 'Description')}</Table.Head>
+          <Table.Head className="w-48">{t('views:repos.commit', 'Commit')}</Table.Head>
           <Table.Head className="w-[15%]">{t('views:repos.tagger', 'Tagger')}</Table.Head>
           <Table.Head className="w-[15%]">{t('views:repos.creationDate', 'Creation date')}</Table.Head>
-          <Table.Head className="w-[7%]" />
+          <Table.Head className="w-[68px]" />
         </Table.Row>
       </Table.Header>
 
@@ -139,10 +139,10 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
                 {tag?.message}
               </Text>
             </Table.Cell>
-            <Table.Cell disableLink>
+            <Table.Cell>
               <CommitCopyActions sha={tag.commit?.sha ?? ''} toCommitDetails={toCommitDetails} />
             </Table.Cell>
-            <Table.Cell disableLink>
+            <Table.Cell>
               <Layout.Horizontal gap="xs">
                 {tag.tagger?.identity.name ? (
                   <>
@@ -164,7 +164,7 @@ export const RepoTagsList: FC<RepoTagsListProps> = ({
                 />
               ) : null}
             </Table.Cell>
-            <Table.Cell className="text-right" disableLink>
+            <Table.Cell className="text-right">
               <MoreActionsTooltip
                 actions={getTableActions(tag).map(action => ({
                   ...action,

diff --git a/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx b/packages/ui/src/views/repo/webhooks/webhook-list/components/repo-webhook-list.tsx
@@ -38,7 +38,7 @@ export function RepoWebhookList({
             const webhooksUrl = toRepoWebhookDetails ? toRepoWebhookDetails({ webhookId: webhook.id }) : `${webhook.id}`
             return (
               <Table.Row to={webhooksUrl} key={webhook.id}>
-                <Table.Cell className="!pr-0" disableLink>
+                <Table.Cell className="!pr-0">
                   <Switch checked={webhook.enabled} onClick={() => handleEnableWebhook(webhook.id, !webhook.enabled)} />
                 </Table.Cell>
 

diff --git a/packages/ui/tailwind-utils-config/components/table-v2.ts b/packages/ui/tailwind-utils-config/components/table-v2.ts
@@ -73,6 +73,11 @@ export default {
       '@apply border-b border-cn-3 transition-colors overflow-hidden': '',
       '@apply last:border-b-0': '',
 
+      '&:has(.cn-table-v2-cell-link:focus-visible)': {
+        outline: 'var(--cn-focus)',
+        outlineOffset: 'calc(2px*-1)'
+      },
+
       '&:where(.row-link-no-underline)': {
         '@apply [&_.cn-table-v2-cell-link]:no-underline': ''
       },
@@ -116,32 +121,29 @@ export default {
 
     // Data cell
     '&-cell': {
+      position: 'relative',
       '@apply align-middle': '',
       '@apply [&:has([role=checkbox])]:py-0 [&:has([role=checkbox])]:!pr-0 [&>[role=checkbox]]:translate-y-[2px]': '',
       '@apply [&:has([role=button])]:py-0 [&:has([role=button])]:!pr-0': '',
       paddingLeft: 'var(--cn-table-cell-px)',
       paddingRight: 'var(--cn-table-cell-px)',
-      gap: 'var(--cn-table-cell-gap)'
+      gap: 'var(--cn-table-cell-gap)',
+
+      'a, button': {
+        position: 'relative',
+        zIndex: '1'
+      }
     },
 
     // Cell link
     '&-cell-link': {
-      '@apply block w-full h-full flex items-center no-underline inset-0 text-cn-foreground-2': '',
-      paddingLeft: 'var(--cn-table-cell-px)',
-      paddingRight: 'var(--cn-table-cell-px)'
-    },
+      position: 'absolute !important',
+      inset: '0',
+      zIndex: '0 !important',
 
-    '&:where(.cn-table-v2-normal) .cn-table-v2-cell-link': {
-      paddingTop: 'var(--cn-table-cell-py-normal)',
-      paddingBottom: 'var(--cn-table-cell-py-normal)'
-    },
-    '&:where(.cn-table-v2-relaxed) .cn-table-v2-cell-link': {
-      paddingTop: 'var(--cn-table-cell-py-relaxed)',
-      paddingBottom: 'var(--cn-table-cell-py-relaxed)'
-    },
-    '&:where(.cn-table-v2-compact) .cn-table-v2-cell-link': {
-      paddingTop: 'var(--cn-table-cell-py-compact)',
-      paddingBottom: 'var(--cn-table-cell-py-compact)'
+      '&:focus-within': {
+        outline: 'none'
+      }
     },
 
     // Caption