From 9f859d04b39bc2d4aee09549ec81806442ed3add Mon Sep 17 00:00:00 2001
From: yjin <devyzyn@gmail.com>
Date: Fri, 3 Jan 2025 18:32:28 +0900
Subject: [PATCH] fix: [GSW-2048] Tooltip Text

---
 .../common/setting-menu-modal/SettingMenuModal.tsx        | 8 ++------
 .../swap-card/swap-card-header/SwapCardHeader.styles.ts   | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/common/setting-menu-modal/SettingMenuModal.tsx b/packages/web/src/components/common/setting-menu-modal/SettingMenuModal.tsx
index 8e95982af..d884a3101 100644
--- a/packages/web/src/components/common/setting-menu-modal/SettingMenuModal.tsx
+++ b/packages/web/src/components/common/setting-menu-modal/SettingMenuModal.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { isAmount } from "@common/utils/data-check-util";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
@@ -47,11 +47,7 @@ const SettingMenuModal: React.FC<SettingMenuModalProps> = ({ slippage, changeSli
   const TooltipFloatingContent = (
     <ModalTooltipWrap>
       <div className="tooltip-wrap">
-        <p
-          dangerouslySetInnerHTML={{
-            __html: t("common:settingModal.slipTolTooltip"),
-          }}
-        ></p>
+        <Trans i18nKey="common:settingModal.slipTolTooltip" components={{ br: <br /> }} />
       </div>
     </ModalTooltipWrap>
   );
diff --git a/packages/web/src/layouts/swap/components/swap-card/swap-card-header/SwapCardHeader.styles.ts b/packages/web/src/layouts/swap/components/swap-card/swap-card-header/SwapCardHeader.styles.ts
index f887f3c31..65aa090da 100644
--- a/packages/web/src/layouts/swap/components/swap-card/swap-card-header/SwapCardHeader.styles.ts
+++ b/packages/web/src/layouts/swap/components/swap-card/swap-card-header/SwapCardHeader.styles.ts
@@ -50,7 +50,7 @@ export const CopyTooltip = styled.div`
   top: -65px;
   .box {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
-    width: 155px;
+    width: 158px;
     padding: 16px;
     gap: 8px;
     flex-shrink: 0;