@commonpub/layer 0.46.0 → 0.47.0

package/components/ContentCard.vue

@@ -303,6 +303,12 @@ function formatCount(n: number | undefined): string {
 .cpub-cc-av {
   width: 18px;
   height: 18px;
+  /* Hard-lock square so a portrait/non-square photo can't render as an oval
+     (intrinsic-ratio fallback if a dimension is dropped). See ArticleView.vue. */
+  min-width: 18px;
+  max-width: 18px;
+  min-height: 18px;
+  max-height: 18px;
   background: var(--accent-bg);
   border: var(--border-width-default) solid var(--accent-border);
   color: var(--accent);

package/components/views/ArticleView.vue

@@ -435,8 +435,18 @@ useJsonLd({
  * Fix: scope display:flex centering to the div variant only.
  */
 .cpub-av {
-  width: 28px;
-  height: 28px;
+  --cpub-av-size: 28px;
+  width: var(--cpub-av-size);
+  height: var(--cpub-av-size);
+  /* Hard-lock to a square. Without min/max clamps, a global img reset or a
+     dropped dimension lets the <img> fall back to its intrinsic aspect ratio,
+     so a portrait photo renders as a tall oval (the deveco blog-avatar bug —
+     visible even on wide viewports, so it's not flex compression). min/max on
+     BOTH axes clamp the used size regardless of what sets width/height. */
+  min-width: var(--cpub-av-size);
+  max-width: var(--cpub-av-size);
+  min-height: var(--cpub-av-size);
+  max-height: var(--cpub-av-size);
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
@@ -459,8 +469,8 @@ img.cpub-av {
   object-fit: cover;
 }
 
-.cpub-av-lg { width: 44px; height: 44px; font-size: 14px; }
-.cpub-av-xl { width: 64px; height: 64px; font-size: 18px; }
+.cpub-av-lg { --cpub-av-size: 44px; font-size: 14px; }
+.cpub-av-xl { --cpub-av-size: 64px; font-size: 18px; }
 
 /* ── AUTHOR ROW ── */
 .cpub-author-row {

package/components/views/ProjectView.vue

@@ -767,8 +767,16 @@ async function handleBuild(): Promise<void> {
  * to the div-variant only — stops img-variant from squishing portrait
  * avatars (object-fit:cover gets dropped on flex-set replaced elements). */
 .cpub-av {
-  width: 28px;
-  height: 28px;
+  --cpub-av-size: 28px;
+  width: var(--cpub-av-size);
+  height: var(--cpub-av-size);
+  /* Hard-lock to a square (min/max on both axes) so a portrait photo can't
+     render as an oval if a global reset or dropped dimension lets the <img>
+     take its intrinsic aspect ratio. See ArticleView.vue. */
+  min-width: var(--cpub-av-size);
+  max-width: var(--cpub-av-size);
+  min-height: var(--cpub-av-size);
+  max-height: var(--cpub-av-size);
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
@@ -789,7 +797,7 @@ img.cpub-av {
   object-fit: cover;
 }
 
-.cpub-av-lg { width: 36px; height: 36px; font-size: 12px; }
+.cpub-av-lg { --cpub-av-size: 36px; font-size: 12px; }
 
 .cpub-author-name {
   font-size: 13px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,12 +54,12 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.18.0",
     "@commonpub/editor": "0.7.11",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/protocol": "0.13.0",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/protocol": "0.13.0",
     "@commonpub/schema": "0.26.0",
     "@commonpub/server": "2.73.0",
     "@commonpub/ui": "0.9.2"