From d3112e8508a89ece12645f62361bf6186d30881e Mon Sep 17 00:00:00 2001
From: Van Nguyen <36019388+nguyentvan7@users.noreply.github.com>
Date: Sun, 26 Jan 2025 08:06:56 -0700
Subject: [PATCH] Revert "Fix formula text being janky (#2618)"

This reverts commit e3482dc7930441a6e3e4d3034a9789aaa5864c90.
---
 libs/gi/ui/src/util/getCalcDisplay.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/libs/gi/ui/src/util/getCalcDisplay.tsx b/libs/gi/ui/src/util/getCalcDisplay.tsx
index cdc603dd2c..67a1dbf775 100644
--- a/libs/gi/ui/src/util/getCalcDisplay.tsx
+++ b/libs/gi/ui/src/util/getCalcDisplay.tsx
@@ -13,6 +13,7 @@ import {
 import { Translate } from '@genshin-optimizer/gi/i18n'
 import type { CalcResult } from '@genshin-optimizer/gi/uidata'
 import type { Info, InfoExtra, KeyMapPrefix } from '@genshin-optimizer/gi/wr'
+import { Typography } from '@mui/material'
 import { useContext, type ReactNode } from 'react'
 import { SillyContext } from '../context'
 import { resolveInfo } from './resolveInfo'
@@ -220,18 +221,15 @@ function computeFormulaDisplay(
 
   components.filter((c) => c)
   result.formula = (
-    <>
+    <Typography
+      sx={{
+        textDecoration: info.strikethrough ? 'line-through' : undefined,
+      }}
+    >
       {components.map((x, i) => (
-        <span
-          style={{
-            textDecoration: info.strikethrough ? 'line-through' : undefined,
-          }}
-          key={i}
-        >
-          {x}
-        </span>
+        <span key={i}>{x}</span>
       ))}
-    </>
+    </Typography>
   )
 
   return result