From 81590f1c9ca52d23fa915da29bf954db657e614a Mon Sep 17 00:00:00 2001 From: diondiondion Date: Fri, 19 Jun 2026 11:51:12 +0200 Subject: [PATCH] [Glitch] Fix custom profile field overflow Port 2a894970ac8d052b196969668c5dd8c81c48cca0 to glitch-soc Signed-off-by: Claire --- .../components/account_header/fields.tsx | 18 ++++++++++++------ .../account_header/styles.module.scss | 2 +- 2 files changed, 13 insertions(+), 7 deletions(-) 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 } }