fix(front): align currency icon vertically with amount text (#20646)

## Summary
- Replaced inline `<span>` wrapping the currency icon with a Linaria
styled component using `display: flex` and `align-items: center`
- The icon was misaligned with the amount text in table views and
settings because the inline span didn't vertically center the SVG icon

## Changes
-
`packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx`

Fixes #20640

packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx

@@ -1,6 +1,9 @@
 import { useContext, useId, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { styled } from '@linaria/react';
 import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme-constants';
+import { isDefined, formatToShortNumber } from 'twenty-shared/utils';
 
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
 import { type FieldDefinition } from '@/object-record/record-field/ui/types/FieldDefinition';
@@ -10,10 +13,13 @@ import {
 } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
-import { isDefined, formatToShortNumber } from 'twenty-shared/utils';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/formatNumber';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+
+const StyledCurrencyIconContainer = styled.span`
+  align-items: center;
+  display: flex;
+`;
 
 type CurrencyDisplayProps = {
   currencyValue: FieldCurrencyValue | null | undefined;
@@ -57,7 +63,7 @@ export const CurrencyDisplay = ({
       <EllipsisDisplay>
         {shouldShowCurrencyTooltip && (
           <>
-            <span
+            <StyledCurrencyIconContainer
               id={tooltipAnchorId}
               onMouseEnter={() => setShouldRenderTooltip(true)}
               onMouseLeave={() => setShouldRenderTooltip(false)}
@@ -67,7 +73,7 @@ export const CurrencyDisplay = ({
                 size={theme.icon.size.md}
                 stroke={theme.icon.stroke.sm}
               />
-            </span>{' '}
+            </StyledCurrencyIconContainer>{' '}
           </>
         )}
         {amountToDisplay !== null