@ai-matrx/design-system 0.61.13 → 0.61.15

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.61.15 — a pill in a panned tile is not an overflowing pill
+
+- Pill guard: the viewport judges only the part of the pill its clipping ancestors leave drawn, and
+  never a pill inside a transformed (translate/scale/rotate) ancestor or one wholly off screen.
+  A pill wider than its nearest clipping ancestor (overflow hidden/auto/scroll/clip) is now
+  reported as overflowing its clipping container. Measured: /board tiles panned off the canvas
+  logged "overflows the viewport". Guard cases added (off-screen and half-off-screen pill in a
+  translated tile: none; pill wider than its clipping tile: flagged).
+
+No consumer action.
+
+## 0.61.14 — a page that scrolls down never hides an overflowing pill
+
+- Pill guard: only a sideways TRACK (an ancestor that scrolls horizontally and not vertically)
+  exempts a pill from the overflow check. 0.61.12 exempted any ancestor with computed
+  `overflow-x: auto`, and a page body with `overflow-y: auto` computes that too — so no pill on a
+  scrolling page was ever judged (measured live on /education/overview). Guard case red on 0.61.13.
+
+No consumer action.
+
 ## 0.61.13 — a pinned count badge is not an overflowing pill
 
 - Pill guard: a capsule positioned `absolute`/`fixed` (a count badge pinned to an icon's corner)

package/dist/index.cjs

@@ -733,7 +733,7 @@ function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
 function overflowPast(el, rect, view) {
   for (let p = el.parentElement; p; p = p.parentElement) {
     const ox = view.getComputedStyle(p).overflowX;
-    if (ox === "auto" || ox === "scroll") return null;
+    if ((ox === "auto" || ox === "scroll") && p.scrollWidth > p.clientWidth + 1 && p.scrollHeight <= p.clientHeight + 1) return null;
   }
   const pinned = ["absolute", "fixed"].includes(view.getComputedStyle(el).position);
   const parent = el.parentElement;
@@ -744,9 +744,48 @@ function overflowPast(el, rect, view) {
       if (by > 0.5) return { what: "its container", by };
     }
   }
-  const vw = el.ownerDocument.documentElement.clientWidth || view.innerWidth;
+  let clip = null;
+  let transformed = false;
+  const root = el.ownerDocument.documentElement;
+  for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
+    const pcs = view.getComputedStyle(p);
+    if (!clip && pcs.overflowX !== "visible" && pcs.overflowX !== "") clip = p;
+    if (pcs.transform && pcs.transform !== "none" || pcs.translate && pcs.translate !== "none" || pcs.scale && pcs.scale !== "none" || pcs.rotate && pcs.rotate !== "none") {
+      transformed = true;
+    }
+  }
+  if (clip && !pinned && clip !== parent) {
+    const cr = clip.getBoundingClientRect();
+    if (cr.width > 0) {
+      const by = Math.max(rect.right - cr.right, cr.left - rect.left);
+      if (by > 0.5) return { what: "its clipping container", by };
+    }
+  }
+  let left = rect.left;
+  let right = rect.right;
+  let top = rect.top;
+  let bottom = rect.bottom;
+  for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
+    const pcs = view.getComputedStyle(p);
+    if (pcs.overflowX === "visible" && pcs.overflowY === "visible") continue;
+    const cr = p.getBoundingClientRect();
+    if (cr.width === 0 && cr.height === 0) continue;
+    if (pcs.overflowX !== "visible") {
+      left = Math.max(left, cr.left);
+      right = Math.min(right, cr.right);
+    }
+    if (pcs.overflowY !== "visible") {
+      top = Math.max(top, cr.top);
+      bottom = Math.min(bottom, cr.bottom);
+    }
+  }
+  const vw = root.clientWidth || view.innerWidth;
+  const vh = root.clientHeight || view.innerHeight;
+  if (transformed) return null;
+  if (vw > 0 && (right <= left || right <= 0 || left >= vw)) return null;
+  if (vh > 0 && (bottom <= top || bottom <= 0 || top >= vh)) return null;
   if (vw > 0) {
-    const by = Math.max(rect.right - vw, -rect.left);
+    const by = Math.max(right - vw, -left);
     if (by > 0.5) return { what: "the viewport", by };
   }
   return null;