fix: correct alignment of buttons in mt-select (#903)

Author: alastair-simon

.changeset/nice-nails-grin.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+fix: mt-select button alignment

packages/component-library/__snapshots__/interaction-tests-form-mt-select--visual-test-suffix-snap.png

@@ -33,7 +33,7 @@
         />
       </div>
 
-      <div class="mt-select__selection-indicators">
+      <div class="mt-select__selection-indicators" :style="{ right: selectionIndicatorsRight }">
         <mt-loader v-if="isLoading" class="mt-select__select-indicator" size="16px" />
 
         <button
@@ -177,16 +177,46 @@ export default defineComponent({
   data() {
     return {
       expanded: false,
+      suffixWidth: 0,
     };
   },
 
   computed: {
     mtFieldClasses(): { "has--focus": boolean } {
       return { "has--focus": this.expanded };
     },
+
+    selectionIndicatorsRight(): string {
+      const baseRightPx = 16;
+      const rightPx = baseRightPx + (this.suffixWidth || 0);
+      return `${rightPx}px`;
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => this.updateSuffixWidth());
+    window.addEventListener("resize", this.updateSuffixWidth, { passive: true });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.updateSuffixWidth);
   },
 
   methods: {
+    updateSuffixWidth() {
+      // Find the suffix container to get the width
+      const suffixElement = this.$el?.querySelector(
+        ".mt-block-field__block > .mt-field__addition:not(.is--prefix)",
+      );
+
+      if (!suffixElement) {
+        this.suffixWidth = 0;
+        return;
+      }
+
+      this.suffixWidth = suffixElement.offsetWidth;
+    },
+
     toggleExpand() {
       if (!this.expanded) {
         this.expand();