diff options
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 33 |
1 files changed, 22 insertions, 11 deletions
diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index 070643e8..dcad3a8d 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -43,26 +43,37 @@ const updateWidth = () => { const wrappedContainer = document.querySelector('#wrapped') as HTMLElement; + if (!wrappedContainer) return; + wrappedContainer.style.width = `100%`; const reset = () => { - let maxWidth = 0; - - if (!wrappedContainer) return; + let widths: number[] = []; wrappedContainer.querySelectorAll('.category').forEach((item) => { - let category = item as HTMLElement; - - if (category.offsetWidth > maxWidth) { - maxWidth = category.offsetWidth; - } + const category = item as HTMLElement; + const style = window.getComputedStyle(category); + + widths.push( + category.offsetWidth + + parseFloat(style.marginLeft) + + parseFloat(style.marginRight) + + parseFloat(style.paddingLeft) + + parseFloat(style.paddingRight) + + parseFloat(style.borderLeftWidth) + + parseFloat(style.borderRightWidth) + ); }); - wrappedContainer.style.width = `calc(${maxWidth * 2}px + 1%)`; - width = wrappedContainer.offsetWidth; + widths.sort((a, b) => b - a); + + const requiredWidth = widths[0] + (widths[1] || 0); + + wrappedContainer.style.width = `${requiredWidth}px`; + width = requiredWidth; }; - for (let i = 0; i < 5; i++) reset(); + reset(); }; onMount(async () => { |