HPCC-33140 ECL Watch v9 fix WU details flicker

fixes an issue on the WU details page, where the data shown would flicker between different values as you scroll the window up & down (most noticeable when viewing archived WUs) Signed-off-by: Jeremy Clements <[email protected]>
hpcc-systems · Jan 3, 2025 · fb4db8f · fb4db8f
1 parent 0b7881c
commit fb4db8f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/esp/src/src-react/components/WorkunitSummary.tsx b/esp/src/src-react/components/WorkunitSummary.tsx
@@ -251,12 +251,10 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
                                     </MessageBar>
                                 }
                             </Sticky>
-                            <Sticky stickyPosition={StickyPositionType.Header}>
+                            <div style={{ position: "sticky", zIndex: 2, top: 44, display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
                                 <WorkunitPersona wuid={wuid} />
-                                <div style={{ width: "512px", height: "64px", float: "right" }}>
-                                    <WUStatus wuid={wuid}></WUStatus>
-                                </div>
-                            </Sticky>
+                                <WUStatus wuid={wuid}></WUStatus>
+                            </div>
                             <TableGroup fields={{
                                 "wuid": { label: nlsHPCC.WUID, type: "string", value: wuid, readonly: true },
                                 "otTraceId": { label: nlsHPCC.Trace, type: "string", value: otTraceId, readonly: true },

diff --git a/esp/src/src-react/components/controls/StateIcon.tsx b/esp/src/src-react/components/controls/StateIcon.tsx
@@ -220,7 +220,7 @@ export const WorkunitPersona: React.FunctionComponent<WorkunitPersonaProps> = ({
         }
     }, [workunit, workunit?.StateID, theme.semanticColors.errorIcon, theme.semanticColors.successIcon, theme.semanticColors.warningIcon]);
 
-    return <FluentProvider theme={themeV9} style={{ marginRight: 4, display: "inline-block" }}>
+    return <FluentProvider theme={themeV9} style={{ paddingTop: 4, flexGrow: 1, height: 26 }}>
         <ThemeProvider theme={theme} title={workunit?.State}>
             {showProtected &&
                 <span style={{ marginLeft: 8, marginRight: 2 }}>