diff --git a/app/javascript/flavours/glitch/components/account_header/fields.tsx b/app/javascript/flavours/glitch/components/account_header/fields.tsx index 8a48ed7502..ab441ba71c 100644 --- a/app/javascript/flavours/glitch/components/account_header/fields.tsx +++ b/app/javascript/flavours/glitch/components/account_header/fields.tsx @@ -337,10 +337,12 @@ function useFieldOverflow() { if (!wrapperEle) return; const wrapperStyles = getComputedStyle(wrapperEle); - const maxWidth = - wrapperEle.offsetWidth - - (parseFloat(wrapperStyles.paddingLeft) + - parseFloat(wrapperStyles.paddingRight)); + const nonContentWidth = + parseFloat(wrapperStyles.paddingLeft) + + parseFloat(wrapperStyles.paddingRight) + + parseFloat(wrapperStyles.borderLeftWidth) + + parseFloat(wrapperStyles.borderRightWidth); + const availableContentWidth = wrapperEle.offsetWidth - nonContentWidth; const label = wrapperEle.querySelector( 'dt > [data-contents]', @@ -349,8 +351,12 @@ function useFieldOverflow() { 'dd > [data-contents]', ); - setIsLabelOverflowing(label ? label.scrollWidth > maxWidth : false); - setIsValueOverflowing(value ? value.scrollWidth > maxWidth : false); + setIsLabelOverflowing( + label ? label.scrollWidth > availableContentWidth : false, + ); + setIsValueOverflowing( + value ? value.scrollWidth > availableContentWidth : false, + ); }, []); const observer = useResizeObserver(handleRecalculate); diff --git a/app/javascript/flavours/glitch/components/account_header/styles.module.scss b/app/javascript/flavours/glitch/components/account_header/styles.module.scss index 5e3ae14dbe..56d57bc81c 100644 --- a/app/javascript/flavours/glitch/components/account_header/styles.module.scss +++ b/app/javascript/flavours/glitch/components/account_header/styles.module.scss @@ -356,7 +356,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; &.fieldItem { border-color: var(--color-border-success-soft); - padding-right: 32px; // 8px padding + 16px for the icon + 8px gap + padding-right: 30px; // 8px padding + 16px for the icon + 8px gap - 2px tolerance } }