From 0e85cb6aadf57264e5cac599320a9da1ccf80934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Colin?= <colin.remi07@gmail.com>
Date: Thu, 8 Feb 2024 14:27:36 +0100
Subject: [PATCH] add max size to text in cards objects

---
 app/src/components/AppCard.tsx | 72 +++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/app/src/components/AppCard.tsx b/app/src/components/AppCard.tsx
index e22c52566..b80f165bc 100644
--- a/app/src/components/AppCard.tsx
+++ b/app/src/components/AppCard.tsx
@@ -22,44 +22,46 @@ const AppCard: React.FC<AppCardProps> = ({
     selected
 }) => {
     return (
-        <Card
-            key={id}
-            elevation={0}
-            onTouchStart={onTouchStart}
-            bg="transparent"
 
-        >
-            <XStack w="100%"
+        <XStack
+            overflow="hidden"
+
+            borderColor={(selected) ? "#E0E0E0" : "white"}
+            borderWidth={(selected) ? 6 : 6}
+            borderRadius="$10">
+            <Card
+                key={id}
+                elevation={0}
+                onTouchStart={onTouchStart}
+
             >
-                <Card.Header w="100%">
-                    <XStack ai="center" py="$1" >
-                        <YStack>
-                            <H3 color={colorOfTheText} selectable={false} >{title}</H3>
-                            <Text theme="alt2" color={colorOfTheText} selectable={false}>{description}</Text>
-                        </YStack>
-                        <XStack flex={1} />
-                        <ChevronRight size="$4" color={colorOfTheText} />
-                    </XStack>
-                </Card.Header>
-                {(
-                    <Card.Background
-                        animation="quick"
-                        borderColor={(selected) ? "#E0E0E0" : "transparent"}
-                        borderWidth={(selected) ? 3 : 0}
-                        borderRadius="$10"
-                        bg="#F0F0F0"
+                <XStack w="100%"
+                >
+                    <Card.Header w="100%">
+                        <XStack ai="center" py="$1" >
+                            <YStack width={235}>
+                                <H3 color={colorOfTheText} selectable={false} >{title}</H3>
+                                <Text theme="alt2" color={colorOfTheText} selectable={false}>{description}</Text>
+                            </YStack>
+                            <XStack flex={1} />
+                            <ChevronRight size="$4" color={colorOfTheText} minWidth="$4" />
+                        </XStack>
+                    </Card.Header>
+                    {(
+                        <Card.Background
 
-                    >
-                        {background && <Image
-                            flex={1}
-                            source={{
-                                uri: background
-                            }}
-                        />}
-                    </Card.Background>
-                )}
-            </XStack>
-        </Card >
+                        >
+                            {background && <Image
+                                flex={1}
+                                source={{
+                                    uri: background
+                                }}
+                            />}
+                        </Card.Background>
+                    )}
+                </XStack>
+            </Card >
+        </XStack>
     );
 }