Added settings provider maximum description lines (#2611)

2 files changed, 25 insertions, 6 deletions

diff --git a/frontend/src/pages/Settings/Providers/components.tsx b/frontend/src/pages/Settings/Providers/components.tsx
index 72e2c3b1f..acae15261 100644
--- a/frontend/src/pages/Settings/Providers/components.tsx
+++ b/frontend/src/pages/Settings/Providers/components.tsx
@@ -108,10 +108,12 @@ export const ProviderView: FunctionComponent<ProviderViewProps> = ({
         })
         .map((v, idx) => (
           <Card
+            titleStyles={{ overflow: "hidden", textOverflow: "ellipsis" }}
             key={BuildKey(v.key, idx)}
             header={v.name ?? capitalize(v.key)}
             description={v.description}
             onClick={() => select(v)}
+            lineClamp={2}
           ></Card>
         ));
     } else {
diff --git a/frontend/src/pages/Settings/components/Card.tsx b/frontend/src/pages/Settings/components/Card.tsx
index 69df15636..a8a33eec3 100644
--- a/frontend/src/pages/Settings/components/Card.tsx
+++ b/frontend/src/pages/Settings/components/Card.tsx
@@ -1,14 +1,23 @@
 import { FunctionComponent } from "react";
-import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
+import {
+  Center,
+  MantineStyleProp,
+  Stack,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import TextPopover from "@/components/TextPopover";
 import styles from "./Card.module.scss";
 
 interface CardProps {
-  header?: string;
   description?: string;
-  plus?: boolean;
+  header?: string;
+  lineClamp?: number | undefined;
   onClick?: () => void;
+  plus?: boolean;
+  titleStyles?: MantineStyleProp | undefined;
 }
 
 export const Card: FunctionComponent<CardProps> = ({
@@ -16,6 +25,8 @@ export const Card: FunctionComponent<CardProps> = ({
   description,
   plus,
   onClick,
+  lineClamp,
+  titleStyles,
 }) => {
   return (
     <UnstyledButton p="lg" onClick={onClick} className={styles.card}>
@@ -24,9 +35,15 @@ export const Card: FunctionComponent<CardProps> = ({
           <FontAwesomeIcon size="2x" icon={faPlus}></FontAwesomeIcon>
         </Center>
       ) : (
-        <Stack h="100%" gap={0} align="flex-start">
-          <Text fw="bold">{header}</Text>
-          <Text hidden={description === undefined}>{description}</Text>
+        <Stack h="100%" gap={0}>
+          <Text fw="bold" style={titleStyles}>
+            {header}
+          </Text>
+          <TextPopover text={description}>
+            <Text hidden={description === undefined} lineClamp={lineClamp}>
+              {description}
+            </Text>
+          </TextPopover>
         </Stack>
       )}
     </UnstyledButton>