@flamingo-stack/openframe-frontend-core 0.0.202 → 0.0.203-snapshot.20260522034243

package/src/components/shared/product-release/product-release-card.tsx

@@ -157,46 +157,60 @@ export function ProductReleaseCard({
       (changelogCounts?.breaking ?? 0)
 
     // Build the metadata-grid cell array — mirrors the hub's
-    // EntityAuthorCard composition (extras → date → author). The
-    // release-type cell carries a colored chip; other cells are plain
-    // value + label.
+    // EntityAuthorCard composition. ALWAYS render all 3 value cells
+    // (Type / Status / Released) — missing values render as a plain
+    // em-dash + label so the grid keeps a fixed 4-cell shape (matching
+    // the skeleton). The Author cell is also always rendered below
+    // (effectiveAuthor falls back to a placeholder shape). This is
+    // load-to-resolve baseline parity: any conditional cell would
+    // introduce a reflow when the skeleton resolves.
+    //
+    // Plan note: em-dash placeholders read as plain text (NOT a colored
+    // StatusBadge for the Type cell) so empty badges don't look broken
+    // next to populated badges.
     type ValueCell = {
       value: string
       label: string
       uppercase: boolean
       colorScheme?: 'error' | 'cyan' | 'success' | 'warning'
     }
-    const valueCells: ValueCell[] = []
-    if (releaseType && releaseTypeBadgeColor) {
-      valueCells.push({
-        value: releaseType.toUpperCase(),
-        label: 'Type',
-        uppercase: true,
-        colorScheme: releaseTypeBadgeColor,
-      })
-    }
-    if (releaseStatus) {
-      valueCells.push({
-        value: releaseStatus.toUpperCase(),
-        label: 'Status',
-        uppercase: true,
-      })
-    }
-    if (formattedDate) {
-      valueCells.push({
-        value: formattedDate,
-        label: 'Released',
-        uppercase: false,
-      })
-    }
-    const hasAuthorCell = !!author?.full_name
-    const totalCells = valueCells.length + (hasAuthorCell ? 1 : 0)
-    // Tailwind JIT cannot compile dynamic class names — explicit branches:
-    const gridColsClass =
-      totalCells >= 4 ? 'md:grid-cols-4'
-        : totalCells === 3 ? 'md:grid-cols-3'
-          : totalCells === 2 ? 'md:grid-cols-2'
-            : 'md:grid-cols-1'
+    const valueCells: ValueCell[] = [
+      releaseType && releaseTypeBadgeColor
+        ? {
+            value: releaseType.toUpperCase(),
+            label: 'Type',
+            uppercase: true,
+            colorScheme: releaseTypeBadgeColor,
+          }
+        : { value: '—', label: 'Type', uppercase: false },
+      releaseStatus
+        ? {
+            value: releaseStatus.toUpperCase(),
+            label: 'Status',
+            uppercase: true,
+          }
+        : { value: '—', label: 'Status', uppercase: false },
+      formattedDate
+        ? {
+            value: formattedDate,
+            label: 'Released',
+            uppercase: false,
+          }
+        : { value: '—', label: 'Released', uppercase: false },
+    ]
+    // EMPTY_AUTHOR_PLACEHOLDER shape — mirrors the hub's
+    // EMPTY_AUTHOR_PLACEHOLDER constant exported from
+    // components/shared/entity-author-card.tsx (hub can't be imported
+    // here; the two are kept in lockstep per the inline-duplication
+    // policy documented in the catalog branch comment above).
+    const effectiveAuthor = author?.full_name
+      ? author
+      : { full_name: '—', avatar_url: null, job_title: 'Unknown' }
+    // Fixed 4-cell grid (Type / Status / Released / Author) so the
+    // skeleton's shape matches the loaded card exactly. The earlier
+    // dynamic `gridColsClass` ternary collapsed missing cells and
+    // caused 28-56px reflow on resolve.
+    const gridColsClass = 'md:grid-cols-4'
     const dividerClass = 'border-b md:border-b-0 md:border-r border-ods-border'
 
     const frameClass = cn(
@@ -242,107 +256,130 @@ export function ProductReleaseCard({
                 v{version}
               </span>
             </div>
-            <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2 mb-3">
-              {title}
-            </h3>
-            {summary && (
-              <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-4 flex-1">
-                {summary}
+            {/* Title — reserve a fixed 2-line height so cards with
+                1-line titles don't shrink and the catalog skeleton-to-
+                content transition is shift-free. Mirrors the
+                onboarding-guide catalog card. */}
+            <div className="min-h-[60px] md:min-h-[72px] flex items-start mb-3">
+              <h3 className="font-['Azeret_Mono'] font-semibold text-xl md:text-2xl text-ods-text-primary leading-tight line-clamp-2">
+                {title}
+              </h3>
+            </div>
+            {/* Summary — fixed 3-line height. `line-clamp-3` caps long
+                summaries at 3 lines; `min-h` reserves the same vertical
+                space when content is shorter, so the catalog grid stays
+                row-consistent regardless of per-card content length.
+                Heights derived from text-sm md:text-base × leading-relaxed
+                (1.625): 14×1.625×3 ≈ 68 px mobile, 16×1.625×3 ≈ 78 px desktop. */}
+            <div className="min-h-[68px] md:min-h-[78px]">
+              <p className="font-['DM_Sans'] text-sm md:text-base text-ods-text-secondary leading-relaxed line-clamp-3">
+                {summary ?? ''}
               </p>
-            )}
+            </div>
           </div>
         </div>
 
-        {/* CHANGELOG STRIP — hidden when total === 0 */}
-        {totalChangelog > 0 && changelogCounts && (
-          <div className="border-t border-ods-border pt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 font-['DM_Sans'] text-sm text-ods-text-secondary">
-            {changelogCounts.features > 0 && (
-              <span className="inline-flex items-center gap-1.5">
-                <Sparkles className="w-3.5 h-3.5" />
-                {changelogCounts.features} {changelogCounts.features === 1 ? 'feature' : 'features'}
-              </span>
-            )}
-            {changelogCounts.fixes > 0 && (
-              <span className="inline-flex items-center gap-1.5">
-                <Wrench className="w-3.5 h-3.5" />
-                {changelogCounts.fixes} {changelogCounts.fixes === 1 ? 'fix' : 'fixes'}
-              </span>
-            )}
-            {changelogCounts.improvements > 0 && (
-              <span className="inline-flex items-center gap-1.5">
-                <TrendingUp className="w-3.5 h-3.5" />
-                {changelogCounts.improvements} {changelogCounts.improvements === 1 ? 'improvement' : 'improvements'}
-              </span>
-            )}
-            {changelogCounts.breaking > 0 && (
-              <span className="inline-flex items-center gap-1.5 text-[var(--ods-attention-yellow-warning)]">
-                <AlertTriangle className="w-3.5 h-3.5" />
-                {changelogCounts.breaking} breaking
-              </span>
-            )}
-          </div>
-        )}
+        {/* CHANGELOG STRIP — ALWAYS rendered so the skeleton's
+            always-on changelog placeholder matches the loaded shape
+            (zero reflow on resolve). When `totalChangelog === 0`, an
+            empty-state line takes the same vertical space as the
+            populated row. */}
+        <div className="border-t border-ods-border pt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 font-['DM_Sans'] text-sm text-ods-text-secondary">
+          {totalChangelog > 0 && changelogCounts ? (
+            <>
+              {changelogCounts.features > 0 && (
+                <span className="inline-flex items-center gap-1.5">
+                  <Sparkles className="w-3.5 h-3.5" />
+                  {changelogCounts.features} {changelogCounts.features === 1 ? 'feature' : 'features'}
+                </span>
+              )}
+              {changelogCounts.fixes > 0 && (
+                <span className="inline-flex items-center gap-1.5">
+                  <Wrench className="w-3.5 h-3.5" />
+                  {changelogCounts.fixes} {changelogCounts.fixes === 1 ? 'fix' : 'fixes'}
+                </span>
+              )}
+              {changelogCounts.improvements > 0 && (
+                <span className="inline-flex items-center gap-1.5">
+                  <TrendingUp className="w-3.5 h-3.5" />
+                  {changelogCounts.improvements} {changelogCounts.improvements === 1 ? 'improvement' : 'improvements'}
+                </span>
+              )}
+              {changelogCounts.breaking > 0 && (
+                <span className="inline-flex items-center gap-1.5 text-[var(--ods-attention-yellow-warning)]">
+                  <AlertTriangle className="w-3.5 h-3.5" />
+                  {changelogCounts.breaking} breaking
+                </span>
+              )}
+            </>
+          ) : (
+            <span className="text-sm text-ods-text-secondary">No changelog entries yet</span>
+          )}
+        </div>
 
-        {/* METADATA GRID FOOTER — mirrors EntityAuthorCard byte-for-byte */}
-        {totalCells > 0 && (
-          <div
-            className={cn(
-              'grid grid-cols-1',
-              gridColsClass,
-              'border border-ods-border rounded-md overflow-hidden w-full',
-            )}
-          >
-            {valueCells.map((cell, i) => (
-              <div
-                key={`${cell.label}-${i}`}
-                className={cn(
-                  'bg-ods-card p-4 flex flex-col gap-3',
-                  // Last value cell skips the trailing divider when no
-                  // author cell follows; otherwise every value cell gets it.
-                  (i < valueCells.length - 1 || hasAuthorCell) && dividerClass,
-                )}
-              >
-                <div className="flex flex-col gap-0">
-                  {cell.colorScheme ? (
-                    <StatusBadge
-                      text={cell.value}
-                      variant="card"
-                      colorScheme={cell.colorScheme}
-                      singleLine
-                      className="self-start"
-                    />
-                  ) : (
-                    <p className="text-h4 text-ods-text-primary">
-                      {cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value}
-                    </p>
-                  )}
-                  <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
-                    {cell.label}
-                  </p>
-                </div>
-              </div>
-            ))}
-            {hasAuthorCell && author && (
-              <div className="bg-ods-card p-4 flex items-center gap-3">
-                <SquareAvatar
-                  src={author.avatar_url ?? undefined}
-                  alt={author.full_name}
-                  fallback={author.full_name.charAt(0).toUpperCase()}
-                  size="md"
-                  variant="round"
-                />
-                <div className="flex flex-col gap-0 flex-1 min-w-0">
-                  <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
-                    {author.full_name}
-                  </p>
-                  <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
-                    {author.job_title || 'Author'}
+        {/* METADATA GRID FOOTER — fixed 4-cell shape (Type / Status /
+            Released / Author) so the skeleton mirrors the loaded card
+            exactly. Empty value cells render em-dash + label (plain
+            text, no colored badge — em-dash badges read as broken next
+            to populated ones); the Author cell falls back to the
+            EMPTY_AUTHOR_PLACEHOLDER shape declared above. */}
+        <div
+          className={cn(
+            'grid grid-cols-1',
+            gridColsClass,
+            'border border-ods-border rounded-md overflow-hidden w-full',
+          )}
+        >
+          {valueCells.map((cell, i) => (
+            <div
+              key={`${cell.label}-${i}`}
+              className={cn('bg-ods-card p-4 flex flex-col gap-3', dividerClass)}
+            >
+              <div className="flex flex-col gap-0">
+                {cell.colorScheme ? (
+                  <StatusBadge
+                    text={cell.value}
+                    variant="card"
+                    colorScheme={cell.colorScheme}
+                    singleLine
+                    className="self-start"
+                  />
+                ) : (
+                  <p
+                    className={cn(
+                      'text-h4',
+                      // Em-dash placeholder reads as secondary text;
+                      // populated values stay primary.
+                      cell.value === '—' ? 'text-ods-text-secondary' : 'text-ods-text-primary',
+                    )}
+                  >
+                    {cell.uppercase ? cell.value.toLocaleUpperCase() : cell.value}
                   </p>
-                </div>
+                )}
+                <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+                  {cell.label}
+                </p>
               </div>
-            )}
+            </div>
+          ))}
+          <div className="bg-ods-card p-4 flex items-center gap-3">
+            <SquareAvatar
+              src={effectiveAuthor.avatar_url ?? undefined}
+              alt={effectiveAuthor.full_name}
+              fallback={effectiveAuthor.full_name.charAt(0).toUpperCase()}
+              size="md"
+              variant="round"
+            />
+            <div className="flex flex-col gap-0 flex-1 min-w-0">
+              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
+                {effectiveAuthor.full_name}
+              </p>
+              <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">
+                {effectiveAuthor.job_title || 'Author'}
+              </p>
+            </div>
           </div>
-        )}
+        </div>
 
         {typeof viewCount === 'number' && viewCount > 0 && (
           <div className="flex items-center gap-1.5 text-xs text-ods-text-secondary">
@@ -463,7 +500,7 @@ export function ProductReleaseCard({
             as the loaded text — zero load-to-resolve baseline shift. */}
         <span className="flex min-w-0 flex-1 flex-col gap-0.5 min-h-14">
           <span className="flex items-center gap-2 min-w-0 h-5">
-            <span className="truncate text-sm font-semibold leading-5 text-ods-text-primary min-w-0">
+            <span className="truncate text-sm font-semibold leading-5 text-ods-text-primary min-w-0" title={title}>
               {title}
             </span>
             {version ? (
@@ -478,7 +515,7 @@ export function ProductReleaseCard({
             </span>
           </span>
           <span className="flex items-center min-w-0 h-4">
-            <span className="truncate text-[11px] leading-4 text-ods-text-secondary/80">
+            <span className="truncate text-[11px] leading-4 text-ods-text-secondary/80" title={summary || undefined}>
               {/* The literal between the curly-quote string is U+00A0
                   (NBSP). The hub's `COMPACT_CARD_ROW_FILLER` is also
                   NBSP; ASCII space here would let React collapse the
@@ -545,11 +582,11 @@ export function ProductReleaseCard({
         {/* Left column - content */}
         <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
           <div className="min-h-[48px] flex items-center">
-            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2">
+            <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
               {title}
             </h3>
           </div>
-          <p className="text-h4 text-ods-text-secondary line-clamp-3">
+          <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
             {summary || ' '}
           </p>
         </div>
@@ -585,11 +622,11 @@ export function ProductReleaseCard({
       {/* Left column - content */}
       <div className="flex-1 w-full md:w-auto min-w-0 flex flex-col justify-center gap-2">
         <div className="min-h-[48px] flex items-center">
-          <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2">
+          <h3 className="text-h3 text-ods-text-primary tracking-[-0.36px] line-clamp-2" title={title}>
             {title}
           </h3>
         </div>
-        <p className="text-h4 text-ods-text-secondary line-clamp-3">
+        <p className="text-h4 text-ods-text-secondary line-clamp-3" title={summary || ' '}>
           {summary || ' '}
         </p>
       </div>

package/src/components/shared/product-release/release-detail-page.tsx

@@ -282,7 +282,7 @@ export function ReleaseDetailPage({
               variant="round"
             />
             <div className="flex flex-col gap-0 flex-1 min-w-0">
-              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate">
+              <p className="text-h3 tracking-[-0.36px] text-ods-text-primary truncate" title={author?.full_name || 'Unknown Author'}>
                 {author?.full_name || 'Unknown Author'}
               </p>
               <p className="font-['DM_Sans'] font-medium text-[14px] leading-[20px] text-ods-text-secondary">

package/src/components/ui/assignee-dropdown.tsx

@@ -159,7 +159,7 @@ function CompactAssigneeDropdown({
                       variant="round"
                       className="h-6 w-6 shrink-0"
                     />
-                    <span className="flex-1 truncate text-h4 text-ods-text-primary">{opt.label}</span>
+                    <span className="flex-1 truncate text-h4 text-ods-text-primary" title={opt.label}>{opt.label}</span>
                     {isCurrent && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
                   </button>
                 )
@@ -194,7 +194,7 @@ function DefaultAssigneeDropdown({
           variant="round"
           className="h-6 w-6 shrink-0"
         />
-        <span className="truncate">{opt.label}</span>
+        <span className="truncate" title={opt.label}>{opt.label}</span>
       </div>
     )
   }, [])
@@ -253,7 +253,7 @@ function DefaultAssigneeDropdown({
                 className="flex items-center gap-[var(--spacing-system-xxs)] cursor-pointer group text-left"
               >
                 <PenEditIcon className="size-4 shrink-0 text-ods-text-secondary group-hover:text-ods-accent transition-colors" />
-                <span className="text-h4 text-ods-text-primary truncate">{currentAssignee!.name}</span>
+                <span className="text-h4 text-ods-text-primary truncate" title={currentAssignee!.name}>{currentAssignee!.name}</span>
               </button>
             </div>
             <span className="text-h6 text-ods-text-secondary truncate">Assigned</span>

package/src/components/ui/autocomplete.tsx

@@ -574,7 +574,7 @@ function AutocompleteInner<T = string>(
                     )}
                     onClick={handleCreate}
                   >
-                    <span className="truncate">+ Create &quot;{inputValue.trim()}&quot;</span>
+                    <span className="truncate" title={`+ Create "${inputValue.trim()}"`}>+ Create &quot;{inputValue.trim()}&quot;</span>
                   </div>
                 ) : (
                   <div className="px-3 py-2 text-ods-text-secondary text-[14px]">
@@ -607,7 +607,7 @@ function AutocompleteInner<T = string>(
                     >
                       {renderOption ? renderOption(option, isSelected) : (
                         <div className="flex items-center justify-between w-full min-w-0">
-                          <span className="truncate">{option.label}</span>
+                          <span className="truncate" title={option.label}>{option.label}</span>
                           {isSelected && (
                             <CheckIcon className="text-ods-accent" size={20} />
                           )}

package/src/components/ui/button/split-button.tsx

@@ -16,7 +16,7 @@ const splitHalfBase = [
   "whitespace-nowrap transition-colors duration-200",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10",
   "disabled:pointer-events-none",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:h-5 [&_svg]:w-5",
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0",
 ]
 
 const splitHalfVariants = cva(splitHalfBase, {
@@ -28,8 +28,8 @@ const splitHalfVariants = cva(splitHalfBase, {
       destructive: buttonSurfaceClasses.destructive,
     },
     size: {
-      default: "h-12 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3",
-      small: "h-6 md:h-8 px-[var(--spacing-system-xs)] text-h5",
+      default: "h-10 md:h-12 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
+      small: "h-6 md:h-8 px-[var(--spacing-system-xs)] text-h5 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4",
     },
     side: { main: "", icon: "" },
   },
@@ -55,8 +55,6 @@ const splitHalfVariants = cva(splitHalfBase, {
     // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
     { side: "icon", size: "default", class: "w-10 px-0" },
     { side: "icon", size: "small", class: "w-6 md:w-8 px-0" },
-
-    { size: "small", class: "[&_svg]:h-4 [&_svg]:w-4" },
   ],
   defaultVariants: { variant: "accent", size: "default", side: "main" },
 })

package/src/components/ui/checkbox-block.tsx

@@ -80,7 +80,7 @@ const CheckboxBlock = React.forwardRef<
       </div>
     </label>
     {error && (
-      <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error">
+      <p className="absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate text-ods-error" title={error}>
         {error}
       </p>
     )}

package/src/components/ui/data-table/data-table-row.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link'
-import React, { memo, useCallback, type ReactNode } from 'react'
+import React, { memo, useCallback, useRef, type ReactNode } from 'react'
 import { flexRender, type Row } from '@tanstack/react-table'
 import { cn } from '../../../utils/cn'
 import { ROW_HEIGHT_DESKTOP } from './data-table-skeleton'
@@ -19,16 +19,28 @@ export interface DataTableRowProps<T> {
 /**
  * Click-bubbling protocol: any element inside a cell that should NOT trigger
  * `onRowClick` / row navigation must carry the `data-no-row-click` attribute.
- * The row checks `target.closest('[data-no-row-click]')` before firing
- * `onClick(item)`. This is the single primitive that interactive cells
- * (action buttons, dropdown menus, checkboxes) must opt into.
+ * The row checks `target.closest('[data-no-row-click]')` and short-circuits:
+ * in `onClick` mode it skips the consumer's handler; in link mode (when
+ * `href` is set) it calls `e.preventDefault()` so `<Link>` does not navigate.
+ *
+ * Clicks originating from portaled descendants (e.g. `FloatingTooltip`,
+ * dropdown menus rendered through `FloatingPortal`) bubble through React's
+ * component tree and reach this handler, but their DOM target lives outside
+ * the row subtree. The handler ignores any click whose target is not
+ * physically contained within the row element — no `stopPropagation`
+ * required at the source.
+ *
+ * In link mode the row IS the `<Link>` — content lives inside it, not under
+ * an absolute overlay — so native browser link behaviour works: hover,
+ * right-click "Open in new tab", middle-click, `Cmd+click`, focus outlines,
+ * `:visited` styles, etc.
  *
  * Example column with action buttons:
  * ```tsx
  * {
  *   id: 'actions',
  *   cell: ({ row }) => (
- *     <div data-no-row-click className="flex gap-2 justify-end pointer-events-auto">
+ *     <div data-no-row-click className="flex gap-2 justify-end">
  *       <Button onClick={() => edit(row.original)}>Edit</Button>
  *     </div>
  *   ),
@@ -49,61 +61,83 @@ function DataTableRowImpl<T>({
   className,
 }: DataTableRowProps<T>) {
   const isLinkMode = Boolean(href) && !onClick
+  const containerRef = useRef<HTMLElement | null>(null)
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       const target = e.target as HTMLElement
-      if (target.closest('[data-no-row-click]')) return
+      // React-bubbled events from portaled descendants (tooltips, dropdowns, etc.)
+      // reach this handler even though their DOM target lives outside the row.
+      // Suppress them — and in link mode, preventDefault so `<Link>` does not navigate.
+      if (!containerRef.current?.contains(target)) {
+        if (isLinkMode) e.preventDefault()
+        return
+      }
+      if (target.closest('[data-no-row-click]')) {
+        if (isLinkMode) e.preventDefault()
+        return
+      }
       onClick?.(row.original)
     },
-    [onClick, row.original],
+    [onClick, row.original, isLinkMode],
   )
 
-  return (
+  const containerClassName = cn(
+    'block rounded-md bg-ods-card border border-ods-border overflow-hidden no-underline text-inherit',
+    (onClick || isLinkMode) && 'cursor-pointer hover:bg-ods-bg-active transition-colors',
+    className,
+  )
+
+  const cells = (
     <div
       className={cn(
-        'relative rounded-md bg-ods-card border border-ods-border overflow-hidden',
-        (onClick || isLinkMode) &&
-          'cursor-pointer hover:bg-ods-bg-active transition-colors',
-        className,
+        'flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
+        compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
       )}
-      onClick={isLinkMode ? undefined : handleClick}
     >
-      {isLinkMode && href && (
-        <Link
-          href={href}
-          prefetch={false}
-          className="absolute inset-0"
-          aria-label="View details"
-        />
-      )}
-      <div
-        className={cn(
-          'relative flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]',
-          compact ? 'py-[var(--spacing-system-xsf)]' : `py-0 ${ROW_HEIGHT_DESKTOP}`,
-          isLinkMode && 'pointer-events-none',
-        )}
+      {row.getVisibleCells().map(cell => {
+        const meta = cell.column.columnDef.meta
+        return (
+          <div
+            key={cell.id}
+            className={cn(
+              'flex flex-col overflow-hidden',
+              alignJustify(meta?.align),
+              meta?.width || 'flex-1 min-w-0',
+              meta?.cellClassName,
+              getHideClasses(meta?.hideAt),
+            )}
+          >
+            <CellContent>
+              {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </CellContent>
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  if (isLinkMode && href) {
+    return (
+      <Link
+        href={href}
+        prefetch={false}
+        ref={containerRef as React.RefObject<HTMLAnchorElement>}
+        className={containerClassName}
+        onClick={handleClick}
       >
-        {row.getVisibleCells().map(cell => {
-          const meta = cell.column.columnDef.meta
-          return (
-            <div
-              key={cell.id}
-              className={cn(
-                'flex flex-col overflow-hidden',
-                alignJustify(meta?.align),
-                meta?.width || 'flex-1 min-w-0',
-                meta?.cellClassName,
-                getHideClasses(meta?.hideAt),
-              )}
-            >
-              <CellContent>
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </CellContent>
-            </div>
-          )
-        })}
-      </div>
+        {cells}
+      </Link>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+      className={containerClassName}
+      onClick={onClick ? handleClick : undefined}
+    >
+      {cells}
     </div>
   )
 }
@@ -114,7 +148,7 @@ export const DataTableRow = memo(DataTableRowImpl) as typeof DataTableRowImpl
 function CellContent({ children }: { children: ReactNode }) {
   if (typeof children === 'string' || typeof children === 'number') {
     return (
-      <span className="text-h4 text-ods-text-primary truncate">{children}</span>
+      <span className="text-h4 text-ods-text-primary truncate" title={String(children)}>{children}</span>
     )
   }
   return <>{children}</>