From 3b978118dc83ecf5523071dba7233890c2ccb912 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Thu, 5 Oct 2023 07:40:25 +0200
Subject: [PATCH] feat(deal-ticket): fix margin and fees alignment (#4956)

---
 .../components/deal-ticket/deal-ticket-fee-details.tsx    | 2 +-
 libs/deal-ticket/src/components/deal-ticket/key-value.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
index 0eeb5e511..8e13c0643 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
@@ -273,7 +273,7 @@ export const DealTicketMarginDetails = ({
                 key={'value-dropdown'}
                 className="flex items-center justify-between w-full gap-2"
               >
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1 text-left">
                   <Tooltip description={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}>
                     <span className="text-muted">{t('Margin required')}</span>
                   </Tooltip>
diff --git a/libs/deal-ticket/src/components/deal-ticket/key-value.tsx b/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
index e287461f5..010342c74 100644
--- a/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
@@ -25,11 +25,11 @@ export const KeyValue = ({
 }: KeyValuePros) => {
   const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
   const valueElement = onClick ? (
-    <button onClick={onClick} className="font-mono">
+    <button onClick={onClick} className="font-mono ml-auto">
       {displayValue}
     </button>
   ) : (
-    <div className="font-mono">{displayValue}</div>
+    <div className="font-mono ml-auto">{displayValue}</div>
   );
   return (
     <div
@@ -40,12 +40,12 @@ export const KeyValue = ({
       }`}
       key={typeof label === 'string' ? label : 'value-dropdown'}
       className={classnames(
-        'text-xs flex justify-between items-center gap-4 flex-wrap',
+        'text-xs flex justify-between items-center gap-4 flex-wrap text-right',
         { 'ml-2': indent }
       )}
     >
       <Tooltip description={labelDescription}>
-        <div className="text-muted">{label}</div>
+        <div className="text-muted text-left">{label}</div>
       </Tooltip>
       <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
         {valueElement}