Improves sticky schema actions combined with end aligned actions (#18178)

* Width calculation of sticky actions

Signed-off-by: Mark Hartman <[email protected]>

* Moved the JavaScript to the right place

* clean up and add negative margin to width

---------

Signed-off-by: Mark Hartman <[email protected]>
Co-authored-by: Dan Harrin <[email protected]>

Author: Saracaen

packages/schemas/dist/components/actions.js

@@ -1,11 +1,62 @@
 export default () => ({
     isSticky: false,
 
+    width: 0,
+
+    resizeObserver: null,
+
+    boundUpdateWidth: null,
+
+    init() {
+        const parent = this.$el.parentElement
+
+        if (!parent) {
+            return
+        }
+
+        this.updateWidth()
+
+        this.resizeObserver = new ResizeObserver(() => this.updateWidth())
+        this.resizeObserver.observe(parent)
+
+        this.boundUpdateWidth = this.updateWidth.bind(this)
+        window.addEventListener('resize', this.boundUpdateWidth)
+    },
+
     enableSticky() {
         this.isSticky = this.$el.getBoundingClientRect().top > 0
     },
 
     disableSticky() {
         this.isSticky = false
     },
+
+    updateWidth() {
+        const parent = this.$el.parentElement
+
+        if (!parent) {
+            return
+        }
+
+        const actionsComputedStyle = getComputedStyle(
+            this.$root.querySelector('.fi-ac'),
+        )
+
+        this.width =
+            parent.offsetWidth +
+            parseInt(actionsComputedStyle.marginInlineStart, 10) * -1 +
+            parseInt(actionsComputedStyle.marginInlineEnd, 10) * -1
+    },
+
+    destroy() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect()
+            this.resizeObserver = null
+        }
+
+        if (this.boundUpdateWidth) {
+            window.removeEventListener('resize', this.boundUpdateWidth)
+            this.boundUpdateWidth = null
+        }
+    },
 })

packages/schemas/dist/index.js

@@ -50,6 +50,7 @@
         :actions="$actions"
         :alignment="$alignment"
         :full-width="$isFullWidth"
+        x-bind:style="isSticky ? `width: ${width}px;` : ''"
     />
 
     @if ($belowContentContainer = $getChildSchema($schemaComponent::BELOW_CONTENT_SCHEMA_KEY)?->toHtmlString())