fix(plugins/plugin-client-common): With full-width blocks, PatternFly Tables have odd column spacing

Fixes #6766

Author: starpit

plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx

@@ -107,7 +107,7 @@ export default function renderCell(table: KuiTable, kuiRow: KuiRow, justUpdated:
     const cellClassName =
       cidx === 0
         ? 'entity-name ' + (outerCSS || '')
-        : (key === 'NAME' ? 'kui--entity-name-secondary ' : key === 'STATUS' ? 'kui--status-cell' : '') +
+        : (/NAME/i.test(key) ? 'kui--entity-name-secondary ' : /STATUS/i.test(key) ? 'kui--status-cell' : '') +
           (outerCSS || '')
 
     const outerClassName = 'cell-inner ' + (css || '') + (onclick ? ' clickable' : '')
@@ -122,7 +122,12 @@ export default function renderCell(table: KuiTable, kuiRow: KuiRow, justUpdated:
 
     const { attributes = [] } = kuiRow
     return (
-      <Td key={cidx} className={cellClassName} onClick={onClickForCell(kuiRow, tab, repl, attributes[cidx - 1], table)}>
+      <Td
+        key={cidx}
+        className={cellClassName}
+        onClick={onClickForCell(kuiRow, tab, repl, attributes[cidx - 1], table)}
+        modifier={!/NAME|NAMESPACE/i.test(key) ? 'fitContent' : undefined}
+      >
         <span data-key={key} data-value={value} data-tag={tag} className={outerClassName}>
           {tag === 'badge' && (
             <span

plugins/plugin-client-common/src/components/Content/Table/TableHeader.tsx

@@ -20,8 +20,12 @@ import React from 'react'
 import { Thead, Th, Tr } from '@patternfly/react-table'
 
 function th(key: string, value: string, outerCSS: string, css?: string) {
+  // nowrap seems to be needed to avoid PatternFly using a "truncate"
+  // mode; see TableCell, where we set "fitContent" as the modifier
+  // for the cells; but that alone seems to cause truncation in the
+  // header :( hence this "nowrap". A bit puzzling.
   return (
-    <Th key={key || value} data-key={key || value} className={`kui--header-cell ${outerCSS || ''}`}>
+    <Th key={key || value} data-key={key || value} className={`kui--header-cell ${outerCSS || ''}`} modifier="nowrap">
       {css ? <span className={css}>{value}</span> : value}
     </Th>
   )

plugins/plugin-client-common/web/scss/components/Table/badges.scss

@@ -126,7 +126,7 @@ $grid-cell-size: 1.25rem;
   .kui--table-like {
     th[data-key='STATUS'],
     td.kui--status-cell {
-      width: 2rem;
+      width: 5rem; /* leave from for "Status" in the header */
     }
     [data-tag='badge'] {
       justify-content: center;