Merge pull request #557 from Peersyst/fix/connected-site-overflow

Fix: ActivityCard overflow
Peersyst · Sep 7, 2023 · 5443f91 · 5443f91
2 parents 8d38a44 + 060a7c6
commit 5443f91
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/src/module/activity/core/ActivityCard/ActivityCard.styles.ts b/src/module/activity/core/ActivityCard/ActivityCard.styles.ts
@@ -4,7 +4,6 @@ import { ChevronRightIcon } from "icons";
 
 export const ActivityCardRoot = styled(Row)(() => ({
     height: 92,
-    justifyContent: "space-between",
     alignItems: "center",
 }));
 

diff --git a/src/module/activity/core/ActivityCard/ActivityCard.tsx b/src/module/activity/core/ActivityCard/ActivityCard.tsx
@@ -1,4 +1,4 @@
-import { Col, Row, Typography } from "@peersyst/react-native-components";
+import { Col, Typography } from "@peersyst/react-native-components";
 import { ReactElement } from "react";
 import { ActivityCardRoot, ActivityDisplay, DefaultActivityAction, Details } from "module/activity/core/ActivityCard/ActivityCard.styles";
 import { Pressable, TextStyle, ViewStyle } from "react-native";
@@ -36,23 +36,22 @@ const ActivityCard = ({
     } = {},
 }: ActivityCardProps): JSX.Element => {
     return (
-        <ActivityCardRoot style={rotStyle}>
-            <Row gap={16}>
-                <ActivityDisplay source={{ uri: imageUrl || config.defaultDAppImage }} />
-                <Col gap={4} justifyContent="center">
-                    <Typography variant="body3Regular" style={titleStyle}>
-                        {title}
-                    </Typography>
-                    <Typography variant="body4Light" style={descriptionStyle} light={!descriptionStyle.color}>
-                        {description}
-                    </Typography>
-                    {details && (
-                        <Details variant="body4Strong" style={detailsStyle}>
-                            {details}
-                        </Details>
-                    )}
-                </Col>
-            </Row>
+        <ActivityCardRoot style={rotStyle} gap={16}>
+            <ActivityDisplay source={{ uri: imageUrl || config.defaultDAppImage }} />
+            <Col gap={4} justifyContent="center" flex={1}>
+                <Typography variant="body3Regular" style={titleStyle}>
+                    {title}
+                </Typography>
+                <Typography variant="body4Light" style={descriptionStyle} light={!descriptionStyle.color} numberOfLines={2}>
+                    {description}
+                </Typography>
+                {details && (
+                    <Details variant="body4Strong" style={detailsStyle}>
+                        {details}
+                    </Details>
+                )}
+            </Col>
+
             {amount && <Balance balance={amount} action={amountAction} variant="body3Strong" units="token" style={amountStyle} />}
             {onAction && (
                 <Col justifyContent="center" alignItems="center">