Flesh out people tab

src/lib/components/Avatar.svelte

@@ -3,18 +3,18 @@
   import Icon from "@lib/components/Icon.svelte"
 
   export let src
-  export let alt = ""
   export let size = 7
   export let icon = "user-rounded"
 </script>
 
-<div
-  class={cx($$props.class, "!flex overflow-hidden rounded-full")}
-  class:center={!src}
-  style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px;`}>
-  {#if src}
-    <img {alt} {src} />
-  {:else}
+{#if src}
+  <div
+    class={cx($$props.class, "shrink-0 overflow-hidden rounded-full bg-cover bg-center")}
+    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; background-image: url(${src}); ${$$props.style || ""}`} />
+{:else}
+  <div
+    class={cx($$props.class, "rounded-full !flex center")}
+    style={`width: ${size * 4}px; height: ${size * 4}px; min-width: ${size * 4}px; ${$$props.style || ""}`}>
     <Icon {icon} size={Math.round(size * 0.7)} />
-  {/if}
-</div>
+  </div>
+{/if}