@gitlab/ui 128.3.0 → 128.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -158,12 +158,21 @@ var script = {
158
158
  } else {
159
159
  this.resizeDone = true;
160
160
  }
161
- this.clipboardButtonWidth = this.showClipboardButton ? this.$refs.clipboardButton.$el.clientWidth : 0;
161
+ this.updateClipboardButtonWidth();
162
162
  },
163
163
  beforeDestroy() {
164
164
  this.disableAutoResize();
165
165
  },
166
166
  methods: {
167
+ updateClipboardButtonWidth() {
168
+ if (!this.showClipboardButton) {
169
+ this.clipboardButtonWidth = 0;
170
+ return;
171
+ }
172
+ const element = this.$refs.clipboardButton.$el;
173
+ const marginLeft = parseInt(getComputedStyle(element).marginLeft, 10);
174
+ this.clipboardButtonWidth = element.offsetWidth + marginLeft;
175
+ },
167
176
  resetItems() {
168
177
  this.fittingItems = [...this.items];
169
178
  this.overflowingItems = [];
@@ -209,6 +218,8 @@ var script = {
209
218
  if (widthNeeded + this.dropdownWidth < containerWidth) break;
210
219
  }
211
220
  }
221
+ const truncatedItemMaxWidth = Math.max(0, containerWidth - (this.dropdownWidth + this.clipboardButtonWidth));
222
+ this.$el.style.setProperty('--gl-breadcrumb-truncated-item-max-width', `${truncatedItemMaxWidth}px`);
212
223
  this.resizeDone = true;
213
224
  },
214
225
  isLastItem(index) {