ref(dashboards): standardize widget related tables to one table

static/app/components/gridEditable/index.tsx

@@ -98,23 +98,24 @@ type GridEditableProps<DataRow, ColumnKey> = {
   bodyStyle?: React.CSSProperties;
   emptyMessage?: React.ReactNode;
   error?: unknown | null;
+  fitMaxContent?: boolean;
+
   /**
    * Inject a set of buttons into the top of the grid table.
    * The controlling component is responsible for handling any actions
    * in these buttons and updating props to the GridEditable instance.
    */
   headerButtons?: () => React.ReactNode;
-
   height?: string | number;
+
   highlightedRowKey?: number;
 
   isLoading?: boolean;
 
   minimumColWidth?: number;
-
   onRowMouseOut?: (row: DataRow, key: number, event: React.MouseEvent) => void;
-  onRowMouseOver?: (row: DataRow, key: number, event: React.MouseEvent) => void;
 
+  onRowMouseOver?: (row: DataRow, key: number, event: React.MouseEvent) => void;
   /**
    * Whether columns in the grid can be resized.
    *
@@ -465,6 +466,8 @@ class GridEditable<
       height,
       'aria-label': ariaLabel,
       bodyStyle,
+      stickyHeader,
+      fitMaxContent,
     } = this.props;
     const showHeader = title || headerButtons;
     return (
@@ -485,8 +488,9 @@ class GridEditable<
               scrollable={scrollable}
               height={height}
               ref={this.refGrid}
+              fitMaxContent={fitMaxContent}
             >
-              <GridHead>{this.renderGridHead()}</GridHead>
+              <GridHead sticky={stickyHeader}>{this.renderGridHead()}</GridHead>
               <GridBody>{this.renderGridBody()}</GridBody>
             </Grid>
           </Body>

static/app/components/gridEditable/styles.tsx

@@ -57,7 +57,7 @@ export const Body = styled(
     showVerticalScrollbar?: boolean;
   }) => (
     <Panel {...props}>
-      <PanelBody>{children}</PanelBody>
+      <PanelBody style={{height: '100%'}}>{children}</PanelBody>
     </Panel>
   )
 )`
@@ -79,7 +79,11 @@ export const Body = styled(
  * <thead>, <tbody>, <tr> are ignored by CSS Grid.
  * The entire layout is determined by the usage of <th> and <td>.
  */
-export const Grid = styled('table')<{height?: string | number; scrollable?: boolean}>`
+export const Grid = styled('table')<{
+  fitMaxContent?: boolean;
+  height?: string | number;
+  scrollable?: boolean;
+}>`
   position: inherit;
   display: grid;
 
@@ -103,14 +107,19 @@ export const Grid = styled('table')<{height?: string | number; scrollable?: bool
           max-height: ${typeof p.height === 'number' ? p.height + 'px' : p.height};
         `
       : ''}
+  ${p =>
+    p.fitMaxContent &&
+    css`
+      min-width: max-content;
+    `}
 `;
 
 /**
  * GridHead is the collection of elements that builds the header section of the
  * Grid. As the entirety of the add/remove/resize actions are performed on the
  * header, most of the elements behave different for each stage.
  */
-export const GridHead = styled('thead')`
+export const GridHead = styled('thead')<{sticky?: boolean}>`
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
@@ -126,6 +135,8 @@ export const GridHead = styled('thead')`
 
   border-top-left-radius: ${p => p.theme.borderRadius};
   border-top-right-radius: ${p => p.theme.borderRadius};
+
+  ${p => (p.sticky ? `position: sticky; top: 0; z-index: ${Z_INDEX_GRID + 1}` : '')}
 `;
 
 export const GridHeadCell = styled('th')<{isFirst: boolean; sticky?: boolean}>`