refactor: use a real element instead of a pseudo element to create the panel header

striker-ui/components/PanelHeader.tsx

@@ -11,10 +11,11 @@ const useStyles = makeStyles(() => ({
   innerHeader: {
     position: 'relative',
     padding: '0 10px',
-    '&::before': {
+  },
+  header: {
     top: '-5px',
     left: '-5px',
-      padding: '10px 0',
+    padding: '20px 0',
     position: 'absolute',
     content: '""',
     borderColor: DIVIDER,
@@ -23,7 +24,6 @@ const useStyles = makeStyles(() => ({
     borderStyle: 'solid',
     width: '100%',
   },
-  },
 }));
 
 const PanelHeader = ({ children }: Props): JSX.Element => {
@@ -31,6 +31,7 @@ const PanelHeader = ({ children }: Props): JSX.Element => {
 
   return (
     <Box className={classes.innerHeader} whiteSpace="pre-wrap">
+      <div className={classes.header} />
       {children}
     </Box>
   );