[6.x] More elegantly mask horizontal overflow for sets (#14753)

Author: jaygeorge

resources/css/core/utilities.css

@@ -55,6 +55,27 @@
     }
 }
 
+/* =Jay. Mask the horizontal overflow of an element, e.g. in a long Bard Set header that overflows its container. Override the default mask by changing the --mask-stop variable. */
+@utility st-mask-horizontal-overflow {
+    --mask-stop: 1rem;
+    --mask: linear-gradient(to left, transparent 0%, black var(--mask-stop));
+    mask-image: var(--mask);
+    mask-repeat: no-repeat;
+    animation: mask-overflow-horizontal linear both;
+    animation-timeline: scroll(self inline);
+    animation-range: calc(100% - var(--mask-stop)) 100%;
+}
+
+@keyframes mask-overflow-horizontal {
+    from {
+        mask-image: var(--mask);
+    }
+
+    to {
+        mask-image: unset;
+    }
+}
+
 /* UTILITIES / TEXT
 =================================================== */
 /* Avoid prefixing things with `st-text-` (st for Statamic) because `text-` is a Tailwind prefix */

resources/js/components/fieldtypes/bard/Set.vue

@@ -26,7 +26,7 @@
                 <span v-if="!isReadOnly" data-drag-handle class="flex cursor-grab" @mousedown="enableDragging">
                     <Icon name="handles" class="size-4 text-gray-400" />
                 </span>
-                <button type="button" class="show-focus-within_target flex flex-1 min-w-0 cursor-pointer items-center gap-4 overflow-x-auto p-2 pe-4 focus:outline-none [--mask:linear-gradient(to_left,transparent_0%,black_1rem)] [-webkit-mask:var(--mask)] [mask:var(--mask)]" @click="toggleCollapsedState">
+                <button type="button" class="show-focus-within_target flex flex-1 min-w-0 cursor-pointer items-center gap-4 overflow-x-auto p-2 pe-4 focus:outline-none st-mask-horizontal-overflow" @click="toggleCollapsedState">
                     <Badge size="lg" :pill="true" color="white" class="px-3">
                         <span v-if="isSetGroupVisible" class="flex items-center gap-2">
                             {{ __(setGroup.display) }}

resources/js/components/fieldtypes/replicator/Set.vue

@@ -152,7 +152,7 @@ reveal.use(rootEl, () => emit('expanded'));
                     class="size-4 cursor-grab text-gray-400"
                     v-if="!readOnly"
                 />
-                <button type="button" class="show-focus-within_target flex flex-1 min-w-0 cursor-pointer items-center gap-4 overflow-x-auto p-2 py-1.75 pe-4 focus:outline-none [--mask:linear-gradient(to_left,transparent_0%,black_1rem)] [-webkit-mask:var(--mask)] [mask:var(--mask)]" @click="toggleCollapsedState">
+                <button type="button" class="show-focus-within_target flex flex-1 min-w-0 cursor-pointer items-center gap-4 overflow-x-auto p-2 py-1.75 pe-4 focus:outline-none st-mask-horizontal-overflow" @click="toggleCollapsedState">
                     <Badge size="lg" pill color="white" class="px-3">
                         <span v-if="isSetGroupVisible" class="flex items-center gap-2">
                             {{ __(setGroup.display) }}