diff --git a/esp/src/src-react/components/InfoGrid.tsx b/esp/src/src-react/components/InfoGrid.tsx
index 65d763cb4da..c1bb14ce463 100644
--- a/esp/src/src-react/components/InfoGrid.tsx
+++ b/esp/src/src-react/components/InfoGrid.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
 import { Checkbox, CommandBar, ICommandBarItemProps, Link } from "@fluentui/react";
+import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { useWorkunitExceptions } from "../hooks/workunit";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
-import { HolyGrail } from "../layouts/HolyGrail";
+import { pivotItemStyle } from "../layouts/pivot";
 
 function extractGraphInfo(msg) {
     const regex = /^([a-zA-Z0-9 :]+: )(graph graph(\d+)\[(\d+)\], )(([a-zA-Z]+)\[(\d+)\]: )?(.*)$/gmi;
@@ -149,18 +150,32 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
         setFilterCounts(filterCounts);
     }, [errorChecked, exceptions, infoChecked, otherChecked, warningChecked]);
 
-    return <HolyGrail
-        header={<CommandBar items={buttons} farItems={copyButtons} />}
-        main={
-            <FluentGrid
-                data={data}
-                primaryID={"id"}
-                alphaNumColumns={{ Name: true, Value: true }}
-                columns={columns}
-                setSelection={setSelection}
-                setTotal={setTotal}
-                refresh={refreshTable}
-            ></FluentGrid>
+    React.useEffect(() => {
+        if (data.length) {
+            const header = document.querySelector(".ms-DetailsList-headerWrapper");
+            const viewport = document.querySelector(".ms-Viewport");
+            if (header && viewport) {
+                header.remove();
+                header["style"].top = "-4px";
+                viewport.prepend(header);
+            }
         }
-    />;
+    }, [data.length]);
+
+    return <SizeMe monitorHeight>{({ size }) =>
+        <div style={{ height: "100%" }}>
+            <CommandBar items={buttons} farItems={copyButtons} />
+            <div style={pivotItemStyle(size)}>
+                <FluentGrid
+                    data={data}
+                    primaryID={"id"}
+                    alphaNumColumns={{ Name: true, Value: true }}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+            </div>
+        </div>
+    }</SizeMe>;
 };
diff --git a/esp/src/src-react/components/WorkunitSummary.tsx b/esp/src/src-react/components/WorkunitSummary.tsx
index 7dfe0f6f6a4..2c9512d0829 100644
--- a/esp/src/src-react/components/WorkunitSummary.tsx
+++ b/esp/src/src-react/components/WorkunitSummary.tsx
@@ -6,7 +6,7 @@ import { WUStatus } from "src/react/index";
 import { formatCost } from "src/Session";
 import { useConfirm } from "../hooks/confirm";
 import { useWorkunit } from "../hooks/workunit";
-import { ReflexContainer, ReflexElement, ReflexSplitter, classNames, styles } from "../layouts/react-reflex";
+import { ReflexContainer, ReflexElement, ReflexSplitter } from "../layouts/react-reflex";
 import { pushUrl, replaceUrl } from "../util/history";
 import { ShortVerticalDivider } from "./Common";
 import { TableGroup } from "./forms/Groups";
@@ -167,71 +167,67 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
     }, [workunit?.ServiceNames?.Item]);
 
     return <>
-        <div style={{ height: "100%", position: "relative" }}>
-            <ReflexContainer orientation="horizontal">
-                <ReflexElement className={classNames.reflexScrollPane}>
-                    <div className="pane-content">
-                        <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-                            <Sticky stickyPosition={StickyPositionType.Header}>
-                                <CommandBar items={buttons} />
-                                {showMessageBar &&
-                                    <MessageBar
-                                        messageBarType={MessageBarType.success}
-                                        dismissButtonAriaLabel={nlsHPCC.Close}
-                                        onDismiss={dismissMessageBar}
-                                    >
-                                        {nlsHPCC.SuccessfullySaved}
-                                    </MessageBar>
-                                }
-                            </Sticky>
-                            <Sticky stickyPosition={StickyPositionType.Header}>
-                                <WorkunitPersona wuid={wuid} />
-                                <div style={{ width: "512px", height: "64px", float: "right" }}>
-                                    <WUStatus wuid={wuid}></WUStatus>
-                                </div>
-                            </Sticky>
-                            <TableGroup fields={{
-                                "wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
-                                "action": { label: nlsHPCC.Action, type: "string", value: workunit?.ActionEx, readonly: true },
-                                "state": { label: nlsHPCC.State, type: "string", value: workunit?.State + (workunit?.StateEx ? ` (${workunit.StateEx})` : ""), readonly: true },
-                                "owner": { label: nlsHPCC.Owner, type: "string", value: workunit?.Owner, readonly: true },
-                                "jobname": { label: nlsHPCC.JobName, type: "string", value: jobname },
-                                "description": { label: nlsHPCC.Description, type: "string", value: description },
-                                "compileCost": { label: nlsHPCC.CompileCost, type: "string", value: `${formatCost(workunit?.CompileCost)}`, readonly: true },
-                                "executeCost": { label: nlsHPCC.ExecuteCost, type: "string", value: `${formatCost(workunit?.ExecuteCost)}`, readonly: true },
-                                "fileAccessCost": { label: nlsHPCC.FileAccessCost, type: "string", value: `${formatCost(workunit?.FileAccessCost)}`, readonly: true },
-                                "protected": { label: nlsHPCC.Protected, type: "checkbox", value: _protected },
-                                "cluster": { label: nlsHPCC.Cluster, type: "string", value: workunit?.Cluster, readonly: true },
-                                "totalClusterTime": { label: nlsHPCC.TotalClusterTime, type: "string", value: workunit?.TotalClusterTime, readonly: true },
-                                "abortedBy": { label: nlsHPCC.AbortedBy, type: "string", value: workunit?.AbortBy, readonly: true },
-                                "abortedTime": { label: nlsHPCC.AbortedTime, type: "string", value: workunit?.AbortTime, readonly: true },
-                                "ServiceNamesCustom": { label: nlsHPCC.Services, type: "string", value: serviceNames, readonly: true, multiline: true },
-                            }} onChange={(id, value) => {
-                                switch (id) {
-                                    case "jobname":
-                                        setJobname(value);
-                                        break;
-                                    case "description":
-                                        setDescription(value);
-                                        break;
-                                    case "protected":
-                                        setProtected(value);
-                                        break;
-                                    default:
-                                        logger.debug(`${id}:  ${value}`);
-                                }
-                            }} />
-                        </ScrollablePane>
-                    </div>
-                </ReflexElement>
-                <ReflexSplitter style={styles.reflexSplitter}>
-                    <div className={classNames.reflexSplitterDiv}></div>
-                </ReflexSplitter>
-                <ReflexElement propagateDimensions={true} className={classNames.reflexPane} style={{ overflow: "hidden" }}>
-                    <InfoGrid wuid={wuid}></InfoGrid>
-                </ReflexElement>
-            </ReflexContainer>
-        </div>
+        <ReflexContainer orientation="horizontal">
+            <ReflexElement>
+                <div className="pane-content">
+                    <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
+                        <Sticky stickyPosition={StickyPositionType.Header}>
+                            <CommandBar items={buttons} />
+                            {showMessageBar &&
+                                <MessageBar
+                                    messageBarType={MessageBarType.success}
+                                    dismissButtonAriaLabel={nlsHPCC.Close}
+                                    onDismiss={dismissMessageBar}
+                                >
+                                    {nlsHPCC.SuccessfullySaved}
+                                </MessageBar>
+                            }
+                        </Sticky>
+                        <Sticky stickyPosition={StickyPositionType.Header}>
+                            <WorkunitPersona wuid={wuid} />
+                            <div style={{ width: "512px", height: "64px", float: "right" }}>
+                                <WUStatus wuid={wuid}></WUStatus>
+                            </div>
+                        </Sticky>
+                        <TableGroup fields={{
+                            "wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
+                            "action": { label: nlsHPCC.Action, type: "string", value: workunit?.ActionEx, readonly: true },
+                            "state": { label: nlsHPCC.State, type: "string", value: workunit?.State + (workunit?.StateEx ? ` (${workunit.StateEx})` : ""), readonly: true },
+                            "owner": { label: nlsHPCC.Owner, type: "string", value: workunit?.Owner, readonly: true },
+                            "jobname": { label: nlsHPCC.JobName, type: "string", value: jobname },
+                            "description": { label: nlsHPCC.Description, type: "string", value: description },
+                            "compileCost": { label: nlsHPCC.CompileCost, type: "string", value: `${formatCost(workunit?.CompileCost)}`, readonly: true },
+                            "executeCost": { label: nlsHPCC.ExecuteCost, type: "string", value: `${formatCost(workunit?.ExecuteCost)}`, readonly: true },
+                            "fileAccessCost": { label: nlsHPCC.FileAccessCost, type: "string", value: `${formatCost(workunit?.FileAccessCost)}`, readonly: true },
+                            "protected": { label: nlsHPCC.Protected, type: "checkbox", value: _protected },
+                            "cluster": { label: nlsHPCC.Cluster, type: "string", value: workunit?.Cluster, readonly: true },
+                            "totalClusterTime": { label: nlsHPCC.TotalClusterTime, type: "string", value: workunit?.TotalClusterTime, readonly: true },
+                            "abortedBy": { label: nlsHPCC.AbortedBy, type: "string", value: workunit?.AbortBy, readonly: true },
+                            "abortedTime": { label: nlsHPCC.AbortedTime, type: "string", value: workunit?.AbortTime, readonly: true },
+                            "ServiceNamesCustom": { label: nlsHPCC.Services, type: "string", value: serviceNames, readonly: true, multiline: true },
+                        }} onChange={(id, value) => {
+                            switch (id) {
+                                case "jobname":
+                                    setJobname(value);
+                                    break;
+                                case "description":
+                                    setDescription(value);
+                                    break;
+                                case "protected":
+                                    setProtected(value);
+                                    break;
+                                default:
+                                    logger.debug(`${id}:  ${value}`);
+                            }
+                        }} />
+                    </ScrollablePane>
+                </div>
+            </ReflexElement>
+            <ReflexSplitter />
+            <ReflexElement>
+                <InfoGrid wuid={wuid}></InfoGrid>
+            </ReflexElement>
+        </ReflexContainer>
         <PublishQueryForm wuid={wuid} showForm={showPublishForm} setShowForm={setShowPublishForm} />
         <ZAPDialog wuid={wuid} showForm={showZapForm} setShowForm={setShowZapForm} />
         <SlaveLogs wuid={wuid} showForm={showThorSlaveLogs} setShowForm={setShowThorSlaveLogs} />