[Spend Allocation] Input Styling on Firefox Needs to Be Overridden

[souredoutlook]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

1. Navigate to spend allocation settings
2. Click "New Allocation"
3. Observe that incremental buttons exist on either side of the input field as well as "stepper arrows" inside the field itself

Screen.Recording.2025-03-26.at.6.15.21.PM.mov

Expected Result

Incrementing can only be done with the explicitly provided components

Actual Result

Firefox (and likely other browsers) may opt to provide stepper arrows in the input field with type number.

This is technically expected as per: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

The following CSS will override the stepper arrows on Firefox specifically:

    input[type=number] {
        -moz-appearance: textfield;
    }

Product Area

Unknown

Link

No response

DSN

No response

Version

No response

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[getsantry]

Routing to @getsentry/product-owners-settings-spend-allocation for triage ⏲️