From 2dcbd11ed0c48c5cbe65d41075bbac38a25dd903 Mon Sep 17 00:00:00 2001
From: Silvano Cerza <silvanocerza@gmail.com>
Date: Thu, 20 Feb 2025 19:04:47 +0100
Subject: [PATCH] Fix buttons positioning in case the ribbons spans multiple
 lines

---
 .../conflicts-resolution/actions-gutter.tsx   | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/views/conflicts-resolution/actions-gutter.tsx b/src/views/conflicts-resolution/actions-gutter.tsx
index 74d01ae..28cc738 100644
--- a/src/views/conflicts-resolution/actions-gutter.tsx
+++ b/src/views/conflicts-resolution/actions-gutter.tsx
@@ -54,7 +54,7 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
       buttons = (
         <foreignObject
           x={actualWidth - 48}
-          y={topLeft + lineHeight / 2 - 12}
+          y={topRight + lineHeight / 2 - 12}
           width="48"
           height="24"
         >
@@ -94,25 +94,35 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
       buttons = (
         <foreignObject
           x={0}
-          y={topLeft + lineHeight / 2 - 12}
+          y={topLeft}
           width={actualWidth}
-          height="24"
+          height={bottomRight - topLeft + 24}
         >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              justifyContent: "space-between",
-            }}
-          >
-            <ButtonRightArrow
-              tooltipText="Overwrite right lines"
-              onClick={() => onAcceptRight(chunk)}
-            />
-            <ButtonLeftArrow
-              tooltipText="Overwrite left lines"
-              onClick={() => onAcceptLeft(chunk)}
-            />
+          <div style={{ position: "relative", height: "100%" }}>
+            <div
+              style={{
+                position: "absolute",
+                left: 0,
+                top: lineHeight / 2 - 12,
+              }}
+            >
+              <ButtonRightArrow
+                tooltipText="Overwrite right lines"
+                onClick={() => onAcceptRight(chunk)}
+              />
+            </div>
+            <div
+              style={{
+                position: "absolute",
+                right: 0,
+                top: topRight - topLeft + lineHeight / 2 - 12,
+              }}
+            >
+              <ButtonLeftArrow
+                tooltipText="Overwrite left lines"
+                onClick={() => onAcceptLeft(chunk)}
+              />
+            </div>
           </div>
         </foreignObject>
       );