brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

overlay overflow hidden so it stops affecting the scroll bar

Browse source
This commit is contained in:
Carter 2026-03-16 14:24:21 -06:00
parent 141ece8a3e
commit 62763dd291
1 changed files with 6 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/common/PulseBox.tsx
View file

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