overlay overflow hidden so it stops affecting the scroll bar

src/common/PulseBox.tsx

@@ -8,7 +8,6 @@ const useStyles = makeStyles((_theme: Theme) => ({
     position: 'relative',
     display: 'block', // Changed to block to respect Box margins
     width: 'fit-content', // Shrinks to child width
-    overflow: 'hidden', // Clip pulse animation so it doesn't affect parent layout
     '&::after': {
       content: '""',
       position: 'absolute',
@@ -16,8 +15,7 @@ const useStyles = makeStyles((_theme: Theme) => ({
       left: 0,
       width: '100%',
       height: '100%',
-      border: '2px solid var(--pulse-color)',
-      borderRadius: 'inherit', // Should inherit from Box
+      borderRadius: 'inherit',
       animation: '$pulse 1.75s infinite ease-in-out',
       pointerEvents: 'none',
       boxSizing: 'border-box',
@@ -26,13 +24,13 @@ const useStyles = makeStyles((_theme: Theme) => ({
   },
   '@keyframes pulse': {
     from: {
-      transform: "scale(1)",
-      opacity: 1
+      boxShadow: '0 0 0 2px var(--pulse-color)',
+      opacity: 1,
     },
     to: {
-      transform: "scale(1.25)",
-      opacity: 0
-    }
+      boxShadow: '0 0 0 14px var(--pulse-color)',
+      opacity: 0,
+    },
   },
 }));