@flamingo-stack/openframe-frontend-core 0.0.592 → 0.0.593

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

@@ -25,6 +25,11 @@ export interface DataTableRowProps<T> {
    * or the design default). The one place a table states how tall a row is, so
    * the pad rows and the skeleton can reserve the SAME number — see
    * `DataTableBodyProps.rowHeightClassName`.
+   *
+   * It sizes the row SLOT — the whole card — not the cells inside it. A row
+   * with a `subRow` is taller than its cells, so sizing the cells would leave
+   * the pad rows (which have no sub-row) short by exactly the sub-row: on a
+   * phone board that was 96px per missing row.
    */
   rowHeightClassName?: string;
   className?: string;
@@ -106,7 +111,11 @@ function DataTableRowImpl<T>({
   );
 
   const containerClassName = cn(
-    'block overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
+    'overflow-hidden rounded-md border border-ods-border bg-ods-card text-inherit no-underline',
+    // A stated slot height goes HERE, on the card, with the cells flexing to
+    // fill whatever the sub-row leaves. `border-box` sizing means the number a
+    // caller writes is the number the row occupies, borders included.
+    rowHeightClassName ? `flex flex-col ${rowHeightClassName}` : 'block',
     // With a sub-row the link wraps only the cells, so keep the clickable affordance off the whole card.
     (onClick || isWholeCardLink) && 'cursor-pointer transition-colors hover:bg-ods-bg-active',
     className,
@@ -118,7 +127,7 @@ function DataTableRowImpl<T>({
         'flex',
         ROW_SHELL_CLASSES,
         rowHeightClassName
-          ? `py-0 ${rowHeightClassName}`
+          ? 'min-h-0 flex-1 py-0'
           : compact
             ? 'py-[var(--spacing-system-xsf)]'
             : autoHeight
@@ -171,7 +180,10 @@ function DataTableRowImpl<T>({
         <Link
           href={href}
           prefetch={false}
-          className="block cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active"
+          className={cn(
+            'cursor-pointer text-inherit no-underline transition-colors hover:bg-ods-bg-active',
+            rowHeightClassName ? 'flex min-h-0 flex-1 flex-col' : 'block',
+          )}
           onClick={handleClick}
         >
           {cells}

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

@@ -31,6 +31,7 @@ export interface DataTableSkeletonProps {
   rowClassName?: string;
   /**
    * REPLACES the design row height, for a table whose rows are not that tall.
+   * Sizes the CARD, as a real row does.
    * Appending a height through `rowClassName` cannot do this: tailwind-merge
    * drops the plain `h-[66px]` but keeps `md:h-[78px]`, so the override held
    * on a phone and lost on a desktop. See `DataTableBodyProps.rowHeightClassName`.
@@ -50,6 +51,8 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
           key={index}
           className={cn(
             'relative animate-pulse overflow-hidden rounded-md border border-ods-border bg-ods-card',
+            // The slot height sits on the card, matching a real row.
+            rowHeightClassName,
             className,
           )}
         >
@@ -57,7 +60,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             className={cn(
               'hidden py-0 md:flex',
               ROW_SHELL_CLASSES,
-              rowHeightClassName ?? ROW_HEIGHT_DESKTOP,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_DESKTOP,
               rowClassName,
             )}
           >
@@ -89,7 +92,7 @@ export function DataTableSkeleton({ rows = 10, className, rowClassName, rowHeigh
             className={cn(
               'flex justify-start py-0 md:hidden',
               ROW_SHELL_CLASSES,
-              rowHeightClassName ?? ROW_HEIGHT_MOBILE,
+              rowHeightClassName ? 'h-full' : ROW_HEIGHT_MOBILE,
               rowClassName,
             )}
           >