diff --git a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx index 0b30181b1f..a08fc1bd7a 100644 --- a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx @@ -64,6 +64,7 @@ export const Input = React.memo(function InnerInput({ placeholder, prependSymbol, onFocus, + pattern: _pattern, ...rest }: { value: string | number @@ -73,10 +74,20 @@ export const Input = React.memo(function InnerInput({ fontSize?: string align?: 'right' | 'left' prependSymbol?: string | undefined + pattern?: string } & Omit, 'ref' | 'onChange' | 'as'>) { // Keep the input strictly as a string const stringValue = typeof value === 'string' ? value : String(value) + const titleRef = React.useCallback( + (node: HTMLInputElement | null) => { + if (node) { + node.title = node.scrollWidth > node.clientWidth ? stringValue : '' + } + }, + [stringValue], + ) + const enforcer = (nextUserInput: string) => { // Always allow empty input if (nextUserInput === '') { @@ -118,6 +129,7 @@ export const Input = React.memo(function InnerInput({ )} { @@ -142,8 +154,6 @@ export const Input = React.memo(function InnerInput({ autoCorrect="off" // Keep type="text" to preserve trailing decimals type="text" - // Remove pattern to prevent browser validation interference - pattern="" placeholder={placeholder || '0'} // minLength to 0 so empty strings are always valid minLength={0} diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx index 957d19b3e9..21a8face81 100644 --- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx +++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx @@ -55,8 +55,7 @@ const Content = styled.div` position: absolute; top: 0; left: 0; - background: var(${UI.COLOR_PRIMARY}); - opacity: 0.16; + background: var(${UI.COLOR_PAPER_DARKER}); width: var(--size); height: var(--size); border-radius: var(--size);