@jant/core 0.3.38 → 0.3.39

package/src/client/components/jant-settings-avatar.ts

@@ -13,6 +13,7 @@
 
 import { LitElement, html, nothing } from "lit";
 import type { SettingsLabels } from "./settings-types.js";
+import { publicPath } from "../runtime-paths.js";
 
 export class JantSettingsAvatar extends LitElement {
   static properties = {
@@ -107,17 +108,22 @@ export class JantSettingsAvatar extends LitElement {
   }
 
   private _renderPreview() {
+    const previewClasses =
+      "rounded-full size-16 overflow-hidden border border-border/70 bg-muted/40 flex items-center justify-center shrink-0";
+
     if (this.avatarUrl) {
-      return html`<img
-        src=${this.avatarUrl}
-        alt=""
-        class="rounded-full object-cover size-16"
-      />`;
+      return html`
+        <div class=${previewClasses}>
+          <img
+            src=${this.avatarUrl}
+            alt=""
+            class="w-full h-full object-cover"
+          />
+        </div>
+      `;
     }
     return html`
-      <div
-        class="rounded-full bg-muted flex items-center justify-center text-muted-foreground size-16"
-      >
+      <div class="${previewClasses} text-muted-foreground">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -146,7 +152,7 @@ export class JantSettingsAvatar extends LitElement {
             ${this._renderPreview()}
             <div class="flex flex-col gap-2">
               <form
-                action="/settings/avatar"
+                action=${publicPath("/settings/avatar")}
                 method="post"
                 enctype="multipart/form-data"
                 class="inline"