From 4d8390aedd7f9e2a91a8b555d90f70d227f01c73 Mon Sep 17 00:00:00 2001
From: Lukas Boehler <lukas@gleap.io>
Date: Mon, 12 Oct 2026 23:28:41 +0200
Subject: [PATCH] fix(capture): Pause/Resume stays under the pointer when the
 pill shows "Paused"

The centred recording pill widened by the "Paused" label to both sides, so
Resume jumped ~27px right of where Pause was clicked; clicking the same spot
again hit the timer. The pill now grows to the left (centred and dragged
pills); phones keep the full-width docked pill.

Found in the live E2E of capture UI v2 (10-12).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/GleapCaptureUI.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/GleapCaptureUI.js b/src/GleapCaptureUI.js
index 99826450..0258e98d 100644
--- a/src/GleapCaptureUI.js
+++ b/src/GleapCaptureUI.js
@@ -854,7 +854,9 @@ export default class GleapCaptureUI {
       this.dot.classList.toggle('paused', !!paused);
     }
     if (this.pausedLabel) {
+      const before = this.pillRight();
       this.pausedLabel.style.display = paused ? '' : 'none';
+      this.keepPillRight(before);
     }
     const button = this.pauseButton;
     if (button) {
@@ -865,6 +867,36 @@ export default class GleapCaptureUI {
     }
   }
 
+  pillRight() {
+    try {
+      return this.pill ? this.pill.getBoundingClientRect().right : null;
+    } catch (exp) {
+      return null;
+    }
+  }
+
+  // "Paused" widens the pill. A centred (or dragged) pill would grow to both sides and move Pause /
+  // Resume away from the pointer that just clicked it, so the pill grows to the left instead.
+  // Phones dock the pill across the whole width; nothing moves there.
+  keepPillRight(before) {
+    const pill = this.pill;
+    const after = this.pillRight();
+    if (!pill || before === null || after === null || window.innerWidth <= 600) {
+      return;
+    }
+    const shift = after - before;
+    if (Math.abs(shift) < 0.5) {
+      return;
+    }
+    if (this.position) {
+      this.position = { left: this.position.left - shift, top: this.position.top };
+      this.place(pill);
+    } else {
+      const margin = (parseFloat(pill.style.marginLeft) || 0) - shift;
+      pill.style.marginLeft = Math.abs(margin) < 0.5 ? '' : margin + 'px';
+    }
+  }
+
   setMicOn(on) {
     const button = this.micButton;
     if (button) {