From 4a17611766065115220b7a08dbbd687d27f80790 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 27 Mar 2023 15:40:23 +0200
Subject: [PATCH] feat(frontend): specify height as well as width for avatars

---
 frontend/src/lib/components/FallbackImage.svelte  | 10 ++++++++--
 frontend/src/routes/edit/member/[id]/+page.svelte |  8 +++++++-
 frontend/src/routes/edit/profile/+page.svelte     |  8 +++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/FallbackImage.svelte b/frontend/src/lib/components/FallbackImage.svelte
index cae5740..9572e46 100644
--- a/frontend/src/lib/components/FallbackImage.svelte
+++ b/frontend/src/lib/components/FallbackImage.svelte
@@ -25,8 +25,14 @@
     {#each urls as url}
       <source {width} srcSet={url} type={contentTypeFor(url)} />
     {/each}
-    <img {width} src={urls[0] || defaultAvatars[0]} {alt} class="rounded-circle img-fluid" />
+    <img
+      {width}
+      height={width}
+      src={urls[0] || defaultAvatars[0]}
+      {alt}
+      class="rounded-circle img-fluid"
+    />
   </picture>
 {:else}
-  <img {width} class="rounded-circle img-fluid" src={defaultAvatars[0]} {alt} />
+  <img {width} height={width} class="rounded-circle img-fluid" src={defaultAvatars[0]} {alt} />
 {/if}
diff --git a/frontend/src/routes/edit/member/[id]/+page.svelte b/frontend/src/routes/edit/member/[id]/+page.svelte
index 7a000db..e149fef 100644
--- a/frontend/src/routes/edit/member/[id]/+page.svelte
+++ b/frontend/src/routes/edit/member/[id]/+page.svelte
@@ -321,7 +321,13 @@
             {#if avatar === ""}
               <FallbackImage alt="Current avatar" urls={[]} width={200} />
             {:else if avatar}
-              <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
+              <img
+                width={200}
+                height={200}
+                src={avatar}
+                alt="New avatar"
+                class="rounded-circle img-fluid"
+              />
             {:else}
               <FallbackImage alt="Current avatar" urls={memberAvatars(data.member)} width={200} />
             {/if}
diff --git a/frontend/src/routes/edit/profile/+page.svelte b/frontend/src/routes/edit/profile/+page.svelte
index ce28d93..4ad25c8 100644
--- a/frontend/src/routes/edit/profile/+page.svelte
+++ b/frontend/src/routes/edit/profile/+page.svelte
@@ -268,7 +268,13 @@
             {#if avatar === ""}
               <FallbackImage alt="Current avatar" urls={[]} width={200} />
             {:else if avatar}
-              <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
+              <img
+                width={200}
+                height={200}
+                src={avatar}
+                alt="New avatar"
+                class="rounded-circle img-fluid"
+              />
             {:else}
               <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} />
             {/if}