chore: update styling for AvatarCard

Parkreiner · Parkreiner · commit f7cffd10a62f · 2023-11-03T21:06:11.000Z
diff --git a/site/src/components/AvatarCard/AvatarCard.tsx b/site/src/components/AvatarCard/AvatarCard.tsx
@@ -1,9 +1,9 @@
 import { type ReactNode } from "react";
-import { Avatar, AvatarIcon } from "components/Avatar/Avatar";
+import { Avatar } from "components/Avatar/Avatar";
 import { type CSSObject, useTheme } from "@emotion/react";
 
 type AvatarCardProps = {
-  header: ReactNode;
+  header: string;
   imgUrl: string;
   altText: string;
 
@@ -32,8 +32,22 @@ export function AvatarCard({
         cursor: "default",
       }}
     >
-      <div css={{ marginRight: "auto" }}>
-        <div css={theme.typography.body1 as CSSObject}>{header}</div>
+      <div css={{ marginRight: "auto", minWidth: 0 }}>
+        <h3
+          title={header}
+          css={[
+            theme.typography.body1 as CSSObject,
+            {
+              lineHeight: 1.5,
+              margin: 0,
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
+            },
+          ]}
+        >
+          {header}
+        </h3>
 
         {subtitle && (
           <div
@@ -47,11 +61,9 @@ export function AvatarCard({
         )}
       </div>
 
-      <div>
-        <Avatar>
-          <AvatarIcon src={imgUrl} alt={altText} />
-        </Avatar>
-      </div>
+      <Avatar src={imgUrl} alt={altText} colorScheme="darken">
+        {header}
+      </Avatar>
     </article>
   );
 }
