From 64423344ea4ae4410013579d21d11872007bea9b Mon Sep 17 00:00:00 2001
From: Alex Rawlings <alex.rawlings@wycliffe.ca>
Date: Tue, 11 Aug 2026 12:00:57 -0600
Subject: [PATCH] Keep icon buttons centered while pressed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The platform button's pressed style is a translate, which overwrites the
same custom property a translate utility uses for centering — so the
suggestion "+" and the arc split button both jumped mid-click.
---
 src/__tests__/components/ArcOverlay.test.tsx    | 17 +++++++++++++++++
 .../components/TokenChip.suggestions.test.tsx   |  9 +++++++++
 src/components/ArcOverlay.tsx                   |  6 ++++--
 src/components/TokenChip.tsx                    |  5 +++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/components/ArcOverlay.test.tsx b/src/__tests__/components/ArcOverlay.test.tsx
index 21132a69..3c274ff8 100644
--- a/src/__tests__/components/ArcOverlay.test.tsx
+++ b/src/__tests__/components/ArcOverlay.test.tsx
@@ -171,6 +171,23 @@ describe('ArcOverlay', () => {
     expect(screen.getByTestId('split-arc-btn').className).toContain('phrase-focused');
   });
 
+  it('centers the split button on the arc midpoint without a translate', () => {
+    // The platform button's pressed style is a translate, so translate-centering breaks while held.
+    const phraseLink = makePhraseLink('p1', ['tok-a', 'tok-b']);
+    render(
+      <ArcOverlay
+        {...requiredProps()}
+        arcPaths={[makeArcPath('p1', 'tok-a')]}
+        focusedPhraseId="p1"
+        phraseLinkById={new Map([['p1', phraseLink]])}
+      />,
+    );
+
+    const button = screen.getByTestId('split-arc-btn');
+    expect(button).toHaveStyle({ transform: 'translate(-50%, -50%)' });
+    expect(button.className).not.toMatch(/translate/);
+  });
+
   it('calls onArcSplit and clears hover state when split button is clicked', async () => {
     const onArcSplit = jest.fn();
     const onSplitHoverChange = jest.fn();
diff --git a/src/__tests__/components/TokenChip.suggestions.test.tsx b/src/__tests__/components/TokenChip.suggestions.test.tsx
index cc37e02d..dea253f2 100644
--- a/src/__tests__/components/TokenChip.suggestions.test.tsx
+++ b/src/__tests__/components/TokenChip.suggestions.test.tsx
@@ -691,6 +691,15 @@ describe('TokenChip suggestion + button', () => {
     expect(addButton).toHaveAttribute('aria-hidden', 'true');
   });
 
+  it('centers itself in the gloss field without a translate', () => {
+    // The platform button's pressed style is a translate, so translate-centering breaks while held.
+    renderChip(makeWordToken('tok-new', 'bank'), { initialAnalysis: homographBankPool('finance') });
+
+    const addButton = screen.getByTestId('suggestion-add');
+    expect(addButton).toHaveClass('tw:inset-y-0', 'tw:my-auto');
+    expect(addButton.className).not.toMatch(/translate/);
+  });
+
   it('force-opens the dropdown over already-typed text and selecting replaces the draft', async () => {
     const onSave = jest.fn();
     renderChip(makeWordToken('tok-new', 'bank'), {
diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index 9451c45c..00f54de3 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -306,9 +306,11 @@ export function ArcOverlay({
               <Button
                 key={`split-arc-${phraseId}-${d}`}
                 aria-label={splitHereLabel}
-                className={`tw:absolute tw:-translate-x-1/2 tw:-translate-y-1/2 tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
+                className={`tw:absolute tw:inline-flex tw:h-auto tw:items-center tw:justify-center tw:rounded tw:border tw:bg-background tw:p-px ${buttonZClass} ${buttonColorClass}${willCreateFreeTokens ? ' tw:hover:border-destructive tw:hover:text-destructive' : ''}`}
                 data-testid="split-arc-btn"
-                style={{ left: midX, top: midY }}
+                // Centered with transform, not a translate utility: the platform button's pressed
+                // style is a translate and would knock it off the midpoint while held.
+                style={{ left: midX, top: midY, transform: 'translate(-50%, -50%)' }}
                 tabIndex={-1}
                 type="button"
                 variant="ghost"
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 0011d841..b9fee611 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -542,8 +542,9 @@ export function TokenChip({
                   // Absolutely positioned inside the input's reserved end-padding so it never
                   // affects layout; we toggle only opacity, fading the button in on focus/hover.
                   // When hidden it is also made non-interactive so an invisible button can't swallow
-                  // clicks.
-                  className={`tw:absolute tw:right-0.5 tw:top-1/2 tw:flex tw:h-2.5 tw:w-2.5 tw:-translate-y-1/2 tw:items-center tw:justify-center tw:rounded tw:p-0 tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
+                  // clicks. Centering is by margin, not translate: the platform button's pressed
+                  // style is a translate and would knock it off center while held.
+                  className={`tw:absolute tw:inset-y-0 tw:right-0.5 tw:my-auto tw:flex tw:h-2.5 tw:w-2.5 tw:items-center tw:justify-center tw:rounded tw:p-0 tw:text-muted-foreground tw:cursor-pointer tw:transition-opacity tw:hover:bg-accent${addVisible ? '' : ' tw:pointer-events-none tw:opacity-0'}`}
                   data-testid="suggestion-add"
                   tabIndex={-1}
                   type="button"