♻️(frontend) add prop to disable reaction toolbar centering adjustment

The main window computes a JS offset to align the reaction toolbar
with the (off-center) reaction toggle. PiP and mobile don't need
this — centering the toolbar is enough. Add `adjustedCentering` to
opt out.

Not a great seam: the component shouldn't know about its host.
A cleaner fix would move the alignment concern to the parent.
Leaving for now to unblock PiP.

Co-authored-by: Cyril <c.gromoff@gmail.com>

src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx

@@ -64,8 +64,10 @@ const SCROLL_AMOUNT = 120 // roughly 3 buttons
 
 export const ReactionButtonsContainer = ({
   children,
+  adjustedCentering,
 }: {
   children: React.ReactNode
+  adjustedCentering?: boolean
 }) => {
   const { isOpen } = useReactionsToolbar()
   const isMobile = useIsMobile()
@@ -93,7 +95,7 @@ export const ReactionButtonsContainer = ({
   }, [])
 
   useEffect(() => {
-    if (isMobile) return
+    if (isMobile || !adjustedCentering) return
     const region = document.getElementById(CONTROL_BAR_REGION_ID)
     if (!region) return
     const check = () => {
@@ -109,7 +111,7 @@ export const ReactionButtonsContainer = ({
       ro.disconnect()
       window.removeEventListener('resize', check)
     }
-  }, [isMobile])
+  }, [isMobile, adjustedCentering])
 
   useLayoutEffect(() => {
     if (!shouldBeCenteredWithToggleButton || isMobile) {
@@ -179,7 +181,7 @@ export const ReactionButtonsContainer = ({
       aria-hidden={!isOpen}
       isVisible={isVisible}
       style={
-        shouldBeCenteredWithToggleButton && !isMobile
+        shouldBeCenteredWithToggleButton && !isMobile && adjustedCentering
           ? { marginRight: `${rightOffset}px` }
           : { margin: '0 15px' }
       }

src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx

@@ -17,7 +17,11 @@ const Container = styled('div', {
   },
 })
 
-export const ReactionsToolbar = () => {
+export const ReactionsToolbar = ({
+  adjustedCentering,
+}: {
+  adjustedCentering?: boolean
+}) => {
   const { isOpen } = useReactionsToolbar()
   const shouldMount = useDelayUnmount(isOpen, 300)
 
@@ -25,7 +29,7 @@ export const ReactionsToolbar = () => {
 
   return (
     <Container>
-      <ReactionButtonsContainer>
+      <ReactionButtonsContainer adjustedCentering={adjustedCentering}>
         {Object.values(Emoji).map((emoji) => (
           <ReactionButton key={emoji} emoji={emoji} />
         ))}