benivo-ui-library 1.10.21 → 1.10.22

package/avatar.less

@@ -20,6 +20,16 @@
     font-family: @font-family;
     overflow: visible; // status markers sit outside the circle
 
+    // Photo fills the circle; the wrapper keeps overflow visible for status
+    // markers, so the image clips itself.
+    &__photo {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
     &__initials {
         font-weight: 600;
         line-height: 1;

package/checkboxGroup.less

@@ -113,7 +113,10 @@
         display: flex;
         align-items: flex-start;
         gap: 6px;
-        white-space: nowrap; // title + subtext share one line
+        // Title + subtext share one line when there is room; when a leading
+        // media element leaves the slot too narrow (media-card variant), the
+        // text wraps instead of pushing the card past the viewport.
+        flex-wrap: wrap;
     }
 
     &__title {
@@ -121,6 +124,7 @@
         line-height: 24px;
         font-weight: 600;
         color: var(--black);
+        min-width: 0; // allow the title to shrink and wrap in a narrow slot
     }
 
     &__subtext {
@@ -128,6 +132,7 @@
         line-height: 24px;
         font-weight: 500;
         color: var(--text-400);
+        min-width: 0; // allow the subtext to shrink and wrap in a narrow slot
     }
 
     &__supporting {

package/emptyState.less

@@ -32,14 +32,33 @@
 
     // --- the decorative pattern ------------------------------------------
     //
-    // Deliberately NOT clipped. Figma's frames let the 480px art run past the
-    // component's bounds and rely on the radial fade to end it, so clipping
-    // here would cut the pattern off part-way through the fade — which is
-    // exactly how it looked before. This layer only exists to give the art a
-    // box to centre itself in.
+    // Not clipped to the component. Figma's frames let the 480px art run past
+    // the component's bounds and rely on the radial fade to end it, so clipping
+    // at the component would cut the pattern off part-way through the fade —
+    // which is exactly how it looked before.
+    //
+    // Sideways, though, it is clipped to the screen (BPO-17750). On a 375px
+    // phone the 480px art is wider than the viewport and the whole page scrolls
+    // sideways. So this layer is as wide as the art, or the screen if that is
+    // narrower, centred on the component, and clips only along x. `overflow-x:
+    // clip` (unlike `hidden`) leaves y visible, so the fade above and below is
+    // untouched. At 480px and wider the layer is exactly the art's box and
+    // nothing is cut.
+    //
+    // `cqw` falls back to the viewport when no ancestor is a size container,
+    // which is the normal case. Inside one, the art clips to that container
+    // instead — that is also what lets Storybook show a phone-width frame.
     &__pattern {
         position: absolute;
-        inset: 0;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        // A browser without `cqw` drops the next line; without this one the
+        // layer would shrink to 0 and clip the pattern away entirely.
+        width: 480px;
+        width: min(480px, 100cqw);
+        transform: translateX(-50%);
+        overflow-x: clip;
         pointer-events: none;
         z-index: 0;
     }