From faa86b829374e36f89448c6eb501f1b8d9f09550 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 20 May 2026 16:44:47 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20add=20prop=20to?=
 =?UTF-8?q?=20disable=20reaction=20toolbar=20centering=20adjustment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/toolbar/ReactionButtonsContainer.tsx       | 8 +++++---
 .../reactions/components/toolbar/ReactionsToolbar.tsx     | 8 ++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
index 19737d76..6a14bad3 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionButtonsContainer.tsx
+++ b/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' }
       }
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
index 8b09b0c0..18845d70 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
+++ b/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} />
         ))}