Keep icon buttons centered while pressed

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();

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'), {

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"

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"