Fix issue with problematically long column names

Author: labkey-alan

packages/components/src/internal/components/base/Grid.tsx

@@ -193,12 +193,15 @@ export class GridHeader extends PureComponent<GridHeaderProps, State> {
                                         onDrop={this.handleDrop}
                                         title={hideTooltip ? undefined : description}
                                     >
-                                        {headerCell ? headerCell(column, i, columns.size) : title}
-                                        {/* headerCell will render the helpTip, so only render here if not using headerCell() */}
-                                        {!headerCell && column.helpTipRenderer && (
-                                            <LabelHelpTip popoverClassName="label-help-arrow-top" title={title}>
-                                                <HelpTipRenderer type={column.helpTipRenderer} />
-                                            </LabelHelpTip>
+                                        {headerCell && headerCell(column, i, columns.size)}
+                                        {!headerCell && (
+                                            <div className={GRID_HEADER_CELL_BODY}>
+                                                {title}
+                                                {/* headerCell will render the helpTip, so only render here if not using headerCell() */}
+                                                <LabelHelpTip popoverClassName="label-help-arrow-top" title={title}>
+                                                    <HelpTipRenderer type={column.helpTipRenderer} />
+                                                </LabelHelpTip>
+                                            </div>
                                         )}
                                     </th>
                                 );

packages/components/src/internal/components/editable/EditableGrid.tsx

@@ -27,6 +27,7 @@ import {
     CELL_SELECTION_HANDLE_CLASSNAME,
     GRID_CHECKBOX_OPTIONS,
     GRID_EDIT_INDEX,
+    GRID_HEADER_CELL_BODY,
     GRID_SELECTION_INDEX,
     MAX_EDITABLE_GRID_ROWS,
 } from '../../constants';
@@ -884,7 +885,7 @@ export class EditableGrid extends PureComponent<EditableGridProps, EditableGridS
 
         // TODO should be able to just use LabelOverlay here since it can handle an alternate tooltip renderer
         return (
-            <>
+            <div className={GRID_HEADER_CELL_BODY}>
                 {!showLabelOverlay && (
                     <>
                         {label}
@@ -909,7 +910,7 @@ export class EditableGrid extends PureComponent<EditableGridProps, EditableGridS
                         <RemoveColumnMenuItem column={qColumn} onClick={metadata.onRemoveColumn} />
                     </DropdownMenu>
                 )}
-            </>
+            </div>
         );
     };
 

packages/components/src/theme/grid.scss

@@ -46,10 +46,10 @@
 }
 
 .grid-header-cell {
-  position: relative;
-  padding: 0 9px;
-  font-weight: bold;
-  vertical-align: top !important; // important because bootstrap has a highly specific selector that sets it to bottom
+    position: relative;
+    padding: 0 9px;
+    font-weight: bold;
+    vertical-align: top !important; // important because bootstrap has a highly specific selector that sets it to bottom
 
     input:not([type=checkbox]) {
         width: 100%
@@ -59,6 +59,11 @@
 .grid-header-cell__body {
     display: flex;
     gap: 8px;
+    // Note: we have to have max-height and overflow-y set because some grid configurations can lead to extremely tall
+    // table headers that take up 100% of the table height, completely blocking the table rows. To repro add a column
+    // with a really long name (at or near the max length of 200 chars) and keep all values blank.
+    max-height: 250px;
+    overflow-y: auto;
 }
 
 .grid-header-cell__title-wrapper {