gsadmin/meet
1
0
Fork 0
mirror of https://github.com/suitenumerique/meet.git synced 2026-08-16 13:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛(frontend) fix toolbar ResizeObserver loop and alignment drift

Browse Source 
* Switch toolbar horizontal alignment from `marginRight` to
  `transform: translateX()`, so it no longer triggers layout reflows
  during ResizeObserver cycles and stops the "ResizeObserver loop"
  error.
* Replace the unstable `shift * 2` margin heuristic with a direct
  1:1 positional delta (`offsetX + shift`).
* Decouple CSS transitions: use the individual CSS `translate`
  property for the slide-up/down animations, leaving `transform`
  free for dynamic horizontal positioning.
This commit is contained in:
lebaudantoine
2026-08-13 11:21:39 +02:00
committed by aleb_the_flash
parent 01e004e272
commit c8ec1c8a9d
2 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -19,6 +19,7 @@ and this project adheres to
- 🐛(frontend) handle 401 responses when syncing user preferences - 🐛(frontend) handle 401 responses when syncing user preferences
- 🐛(frontend) harden speaker test against missing sinks and play errors - 🐛(frontend) harden speaker test against missing sinks and play errors
- 🐛(frontend) implement hysteresis band for the control bar layout - 🐛(frontend) implement hysteresis band for the control bar layout
- 🐛(frontend) fix toolbar ResizeObserver loop and alignment drift
## [1.26.0] - 2026-08-12 ## [1.26.0] - 2026-08-12
src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
+7 -7
View File
@@ -26,8 +26,8 @@ const StyledContainer = styled('div', {
backgroundColor: 'primaryDark.100', backgroundColor: 'primaryDark.100',
maxWidth: '100%', maxWidth: '100%',
opacity: 0, opacity: 0,
transform: 'translateY(3.25rem)', translate: '0 3.25rem',
transition: 'opacity, transform', transition: 'opacity, translate',
transitionDuration: '0.5s', transitionDuration: '0.5s',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
pointerEvents: 'none', pointerEvents: 'none',
@@ -36,7 +36,7 @@ const StyledContainer = styled('div', {
isVisible: { isVisible: {
true: { true: {
opacity: 1, opacity: 1,
transform: 'translateY(0)', translate: '0 0',
pointerEvents: 'auto', pointerEvents: 'auto',
}, },
}, },
@@ -84,7 +84,7 @@ export const ReactionButtonsContainer = ({
shouldBeCenteredWithToggleButton, shouldBeCenteredWithToggleButton,
setShouldBeCenteredWithToggleButton, setShouldBeCenteredWithToggleButton,
] = useState(false) ] = useState(false)
const [rightOffset, setRightOffset] = useState(0) const [offsetX, setOffsetX] = useState(0)
const updateArrows = useCallback(() => { const updateArrows = useCallback(() => {
const el = scrollRef.current const el = scrollRef.current
@@ -115,7 +115,7 @@ export const ReactionButtonsContainer = ({
useLayoutEffect(() => { useLayoutEffect(() => {
if (!shouldBeCenteredWithToggleButton || isMobile) { if (!shouldBeCenteredWithToggleButton || isMobile) {
setRightOffset(0) setOffsetX(0)
return return
} }
@@ -133,7 +133,7 @@ export const ReactionButtonsContainer = ({
const containerCenterX = containerRect.left + containerRect.width / 2 const containerCenterX = containerRect.left + containerRect.width / 2
const shift = toggleCenterX - containerCenterX const shift = toggleCenterX - containerCenterX
if (Math.abs(shift) < 0.5) return if (Math.abs(shift) < 0.5) return
setRightOffset((prev) => prev - shift * 2) setOffsetX((prev) => prev + shift)
} }
const schedule = () => { const schedule = () => {
@@ -182,7 +182,7 @@ export const ReactionButtonsContainer = ({
isVisible={isVisible} isVisible={isVisible}
style={ style={
shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering
? { marginRight: `${rightOffset}px` } ? { transform: `translateX(${offsetX}px)` }
: { margin: '0 15px' } : { margin: '0 15px' }
} }
> >