From 3aefe4fa88c5b288ec385d7d565c6cabdc079b10 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 21 Nov 2022 17:04:07 +0100
Subject: [PATCH] fix(frontend): limit avatar size

---
 frontend/components/FallbackImage.tsx |  6 ++++--
 frontend/components/PersonPage.tsx    | 26 ++++++++++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/components/FallbackImage.tsx b/frontend/components/FallbackImage.tsx
index 5ccca12..ffd8493 100644
--- a/frontend/components/FallbackImage.tsx
+++ b/frontend/components/FallbackImage.tsx
@@ -23,9 +23,11 @@ export default function FallbackImage({ urls, alt, className }: Props) {
           } else {
             contentType = "application/octet-stream";
           }
-          return <source key={key} srcSet={url} type={contentType} />;
+          return (
+            <source width={200} key={key} srcSet={url} type={contentType} />
+          );
         })}
-      <img src={fallbackUrl} alt={alt} className={className} />
+      <img width={200} src={fallbackUrl} alt={alt} className={className} />
     </picture>
   );
 }
diff --git a/frontend/components/PersonPage.tsx b/frontend/components/PersonPage.tsx
index 633a24d..ed13e74 100644
--- a/frontend/components/PersonPage.tsx
+++ b/frontend/components/PersonPage.tsx
@@ -1,5 +1,14 @@
 import Head from "next/head";
-import { Field, Member, Name, PartialPerson, Person, Pronoun, User, WordStatus } from "../lib/types";
+import {
+  Field,
+  Member,
+  Name,
+  PartialPerson,
+  Person,
+  Pronoun,
+  User,
+  WordStatus,
+} from "../lib/types";
 import ReactMarkdown from "react-markdown";
 import { userState } from "../lib/state";
 import { useRecoilValue } from "recoil";
@@ -41,10 +50,13 @@ export default function PersonPage({ person }: { person: Person }) {
         <LabelList content={person.names ?? []} />
         <LabelList content={person.pronouns ?? []} />
         <FieldCardGrid fields={person.fields ?? []} />
-        {"user" in person
-          ? <BlueLink to={personURL(person.user)}>{`< ${person.user.display_name}`}</BlueLink>
-          : <MemberList user={person as any as User} />
-        }
+        {"user" in person ? (
+          <BlueLink to={personURL(person.user)}>{`< ${
+            person.user.display_name ?? person.user.name
+          }`}</BlueLink>
+        ) : (
+          <MemberList user={person as any as User} />
+        )}
       </div>
     </>
   );
@@ -203,7 +215,9 @@ function PersonInfo({ person }: { person: Person }) {
   return (
     <div className="flex flex-col">
       {/* name */}
-      <h1 className="text-2xl font-bold">{display_name === null ? name : display_name}</h1>
+      <h1 className="text-2xl font-bold">
+        {display_name === null ? name : display_name}
+      </h1>
       {/* handle */}
       <h3 className="text-xl font-light text-slate-600 dark:text-slate-400">
         {personFullHandle(person)}