From 45ac3e8218e6839ff73e109679f6dd2fa01ccb85 Mon Sep 17 00:00:00 2001
From: Shubham Singh <shubhamsinghlmp578@gmail.com>
Date: Mon, 18 May 2026 14:18:54 +0530
Subject: [PATCH] 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
---
 .../field/display/components/CurrencyDisplay.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
index d953aff34e..d374a8148b 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx
+++ b/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