From c630fb4eda84431fd648b52cea29498e696e30ab Mon Sep 17 00:00:00 2001
From: vetalcore <vetalcore@gmail.com>
Date: Mon, 28 Oct 2024 16:17:49 +0200
Subject: [PATCH] fix: [lw-11747] add line clamp styling for tockens and
 collectibles

---
 packages/nami/src/ui/app/components/asset.tsx        |  8 +++++++-
 packages/nami/src/ui/app/components/collectible.tsx  |  8 +++++++-
 .../src/ui/app/components/collectiblesViewer.tsx     |  8 +++++++-
 packages/nami/src/ui/app/components/styles.css       | 12 ------------
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/packages/nami/src/ui/app/components/asset.tsx b/packages/nami/src/ui/app/components/asset.tsx
index 8b16d5733..45587328b 100644
--- a/packages/nami/src/ui/app/components/asset.tsx
+++ b/packages/nami/src/ui/app/components/asset.tsx
@@ -33,6 +33,12 @@ const useIsMounted = () => {
   return isMounted;
 };
 
+const lineClampStyle = {
+  display: '-webkit-box',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+};
+
 type Props = Pick<CommonOutsideHandlesContextValue, 'cardanoCoin'> &
   PropsWithChildren<{
     asset: NamiAsset;
@@ -128,8 +134,8 @@ const Asset = ({
 
           <Box w={4} />
           <Box
+            style={lineClampStyle}
             width="90px"
-            className="lineClamp"
             fontWeight="bold"
             overflow="hidden"
             fontSize={12}
diff --git a/packages/nami/src/ui/app/components/collectible.tsx b/packages/nami/src/ui/app/components/collectible.tsx
index d83bd1109..613c98ec5 100644
--- a/packages/nami/src/ui/app/components/collectible.tsx
+++ b/packages/nami/src/ui/app/components/collectible.tsx
@@ -22,6 +22,12 @@ const useIsMounted = () => {
   return isMounted;
 };
 
+const lineClampStyle = {
+  display: '-webkit-box',
+  '-webkit-line-clamp': '3',
+  '-webkit-box-orient': 'vertical',
+};
+
 const CollectibleComponent = ({ asset, ...props }, ref) => {
   const capture = useCaptureEvent();
   const background = useColorModeValue('gray.300', 'white');
@@ -103,7 +109,7 @@ const CollectibleComponent = ({ asset, ...props }, ref) => {
           >
             <Box
               overflow="hidden"
-              className="lineClamp3"
+              style={lineClampStyle}
               fontSize={13}
               fontWeight="bold"
               color="GrayText"
diff --git a/packages/nami/src/ui/app/components/collectiblesViewer.tsx b/packages/nami/src/ui/app/components/collectiblesViewer.tsx
index fcf9a8380..021f9bf70 100644
--- a/packages/nami/src/ui/app/components/collectiblesViewer.tsx
+++ b/packages/nami/src/ui/app/components/collectiblesViewer.tsx
@@ -42,6 +42,12 @@ import Copy from './copy';
 
 import type { Asset as NamiAsset } from '../../../types/assets';
 
+const lineClampStyle = {
+  display: '-webkit-box',
+  '-webkit-line-clamp': '2',
+  '-webkit-box-orient': 'vertical',
+};
+
 interface Props {
   assets: NamiAsset[];
   setAvatar: (image: string) => void;
@@ -221,7 +227,7 @@ export const CollectibleModalComponent = (
             <Box h={6} />
             <Box
               textAlign="center"
-              className="lineClamp"
+              style={lineClampStyle}
               overflow="hidden"
               fontSize={14}
               fontWeight="bold"
diff --git a/packages/nami/src/ui/app/components/styles.css b/packages/nami/src/ui/app/components/styles.css
index 635c4d33b..58c188af3 100644
--- a/packages/nami/src/ui/app/components/styles.css
+++ b/packages/nami/src/ui/app/components/styles.css
@@ -1,15 +1,3 @@
-.lineClamp {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.lineClamp3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
 body::-webkit-scrollbar {
   display: none;
 }