fix: History content negative z-index disallow clicks (#1069)

* fix content clicks

Signed-off-by: Assem Hafez <assem.hafez@uber.com>

* Update src/views/workflow-history/workflow-history.styles.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Signed-off-by: Assem Hafez <assem.hafez@uber.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: Assem-Uber

src/views/workflow-history/workflow-history-header/workflow-history-header.styles.ts

@@ -26,6 +26,7 @@ export const styled = {
           position: 'sticky',
           top: 0,
           boxShadow: $isSticky ? $theme.lighting.shallowBelow : 'none',
+          zIndex: 1,
         },
       }),
     })

src/views/workflow-history/workflow-history.styles.ts

@@ -4,12 +4,19 @@ import type {
 } from '@/hooks/use-styletron-classes';
 
 const cssStylesObj = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    // This is to ensure the header section z-index is relative to this container and do not
+    // show above external elements like popovers and modals
+    position: 'relative',
+    zIndex: 0,
+  },
   contentSection: {
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-    // This is to ensure the content section is behind the header
-    zIndex: -1,
   },
   eventsContainer: (theme) => ({
     display: 'flex',

src/views/workflow-history/workflow-history.tsx

@@ -316,7 +316,7 @@ export default function WorkflowHistory({ params }: Props) {
   }
 
   return (
-    <>
+    <div className={cls.container}>
       <WorkflowHistoryHeader
         isExpandAllEvents={isExpandAllEvents}
         toggleIsExpandAllEvents={toggleIsExpandAllEvents}
@@ -548,6 +548,6 @@ export default function WorkflowHistory({ params }: Props) {
           />
         )}
       </PageSection>
-    </>
+    </div>
   );
 }