fix: [lw-11747] add line clamp styling for tockens and collectibles (#1489)

Author: vetalcore

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}

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"

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"

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;
 }