Merge pull request #270 from threshold-network/detailed-link-item-fix

Update `DetailedLinkListItem` component

Improve responsive styles for this component- show an ellipsis if there is not
enough space to display the full text.

Author: michalsmiarowski

src/components/DetailedLinkListItem/index.tsx

@@ -49,9 +49,11 @@ const DetailedLinkListItem: FC<DetailedLinkListItemProps> = ({
         spacing={0}
         my={{ base: "2", sm: undefined }}
         mr={{ sm: "auto !important" }}
+        flex={1}
+        minWidth="0"
       >
         <BodyLg sx={styles.title}>{title}</BodyLg>
-        <BodySm sx={styles.subtitle}>{subtitle}</BodySm>
+        <BodySm sx={styles.subTitle}>{subtitle}</BodySm>
       </Stack>
       {isExternal ? (
         <Link

src/theme/DetailedLinkListItem.ts

@@ -32,9 +32,13 @@ const baseStyle: PartsStyleFunction<typeof parts> = (props) => {
     },
     subTitle: {
       color: mode("gray.500", "white")(props),
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
     },
     link: {
       color: mode("gray.700", "white")(props),
+      ml: { sm: "2" },
     },
     imageFallback: {
       w: "48px",