WIP: fix: measure overflow button width instead of using magic 50px

Author: Felipe Lang

src/main/resources/META-INF/resources/frontend/src/fc-days-of-week-selector.ts

@@ -135,16 +135,38 @@ export class DaysOfWeekSelector extends ResizeMixin(ThemableMixin(LitElement)) {
         this._updateOnOverflow();
     }
 
+    /**
+     * Returns overflow button width.
+     *
+     * @private
+     */
+    private _getOverflowButtonWidth() {
+        let overflowWidth = 0;
+        const badge = this._overflowBadge;
+        if (badge) {
+            const wasHidden = badge.hasAttribute('hidden');
+            if (wasHidden) {
+                badge.removeAttribute('hidden');
+            }
+            overflowWidth = badge.getBoundingClientRect().width || 0;
+            if (wasHidden) {
+                badge.setAttribute('hidden', '');
+            }
+        }
+        return overflowWidth;
+    }
+
     private _updateOnOverflow() {
         const containerWidth = this.getBoundingClientRect().width;
         let usedWidth = 0;
         const overflowButtons: Node[] = [];
+        const overflowButtonWidth = this._getOverflowButtonWidth();
 
         for (const button of this._daysOfWeek) {
             button.style.display = '';
             const width = button.getBoundingClientRect().width;
 
-            if (usedWidth + width > containerWidth - 50) {
+            if (usedWidth + width > containerWidth - overflowButtonWidth) {
                 const clonedButton = this._cloneButton(button);
                 overflowButtons.push(clonedButton);