Bugfix(modeling-commons): Set profile avatars fetch dimensions

Author: omargfh

apps/modeling-commons-frontend/app/components/upload/AvatarUpload.vue

@@ -19,6 +19,8 @@
           :text="initials"
           :pending="pending"
           class="size-full rounded-full bg-neutral-darkest/5 text-2xl"
+          :width="160"
+          :height="160"
           variant="compact"
         />
 

apps/modeling-commons-frontend/app/components/user/UserAvatar.vue

@@ -20,6 +20,8 @@
       :alt="displayAlt"
       :text="initials"
       :size="variantProps.avatar.size"
+      :width="headlineImagePx"
+      :height="headlineImagePx"
       class="size-20 lg:size-8"
       :ui="{ ...asRecord(variantProps.avatar.ui), ...asRecord($attrs.ui) }"
       v-bind="$attrs"
@@ -59,6 +61,13 @@ const props = withDefaults(defineProps<AvatarProps>(), {
   container: "",
 });
 
+// UAvatar requests the IPX image at its `size` token (caps at 48px), but the
+// headline box is painted at size-20 (80px). Request 80px so @nuxt/image's 2×
+// density variant stays sharp on retina; the externally-sized `compact` variant
+// is left to its call sites since its box varies (20px–160px).
+// -- Omar Ibrahim, Jun 18 26
+const headlineImagePx = 80;
+
 const displayAlt = computed(() => createAltText(props.alt, props.name));
 const initials = computed(() => createInitials(props.name));
 const variantProps = computed(() => getVariantProps(props.variant));

apps/modeling-commons-frontend/app/components/user/UserHeader.vue

@@ -5,6 +5,8 @@
         :src="image"
         :name="name"
         class="size-25 sm:size-30 lg:size-35"
+        :width="140"
+        :height="140"
         variant="compact"
       />
       <div class="space-y-2">