fix(ui): Move operator close button to bottom in arithmetic builder

[jameskeane]

Problem

In the equation builder, the close × button on arithmetic operators (+, -, *, /) was positioned at the top of the token, which looked awkward and was inconsistent with user expectations. The outline/border also didn't properly encompass the close button.

Issue: Linear DAIN-1735

Solution

Changes Made (2 commits):

Commit 1: Move close button to bottom

• Repositioned the floating close button from the top (top: -14px) to the bottom (bottom: -14px)
• Updated FloatingCloseButton border-radius to 0 0 2px 2px (bottom corners rounded)
• Refactored ArithmeticTokenOperator to use a custom implementation instead of the generic DeletableToken wrapper

Commit 2: Fix hover border positioning

• Changed HoverFocusBorder from vertically centered to top-aligned (top: 0 instead of top: 50%)
• Updated height from 33px to calc(100% + 14px) to properly encompass both operator (24px) and close button (14px)
• Simplified transform from translate(-50%, -50%) to translateX(-50%) for horizontal centering only
• Changed border-radius to 2px (all corners rounded) for proper outline wrapping

Visual Changes

The operator tokens now display with the close button at the bottom, and the hover/focus outline properly encompasses both the operator icon and the close button.

Before vs After

Normal state (no hover):
Normal state - operators visible, close buttons hidden

Hover state - Plus operator:
Plus operator with close button at bottom

Hover state - Minus operator:
Minus operator with close button at bottom

Hover state - Multiply operator:
Multiply operator with close button at bottom

Verification

✅ Close button appears at the bottom when hovering
✅ Hover outline (purple border) properly wraps around both operator and close button
✅ Border-radius is correctly applied (2px on all corners)
✅ Height calculation works correctly (38px total: 24px operator + 14px button)
✅ Close button is hidden when not hovering

All functionality is preserved:

• Keyboard navigation (arrow keys)
• Delete via keyboard (Backspace/Delete)
• Delete via click
• Focus management

Testing

Manual testing was performed using a static HTML test page that replicates the component styling. All hover states were verified visually across all four operator types (+, -, *, /).

To test locally:

1. Navigate to any view with the arithmetic builder (e.g., metric equations)
2. Create an equation with operators (+, -, *, /)
3. Hover over an operator token
4. Verify the close × button appears at the bottom (not the top)
5. Verify the outline encompasses both the operator icon and the close button

_{To show artifacts inline, enable in settings.}

Linear Issue: DAIN-1735

  

[linear-code]

DAIN-1735