tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix custom profile field overflow (#39513)

Browse Source
This commit is contained in:
diondiondion 2026-06-19 11:51:12 +02:00 committed by Claire
parent 2a80a07854
commit 58cf7cfd75
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/mastodon/components/account_header/fields.tsx
View File

@ -337,10 +337,12 @@ function useFieldOverflow() {
if (!wrapperEle) return; if (!wrapperEle) return;
const wrapperStyles = getComputedStyle(wrapperEle); const wrapperStyles = getComputedStyle(wrapperEle);
const maxWidth = const nonContentWidth =
wrapperEle.offsetWidth - parseFloat(wrapperStyles.paddingLeft) +
(parseFloat(wrapperStyles.paddingLeft) + parseFloat(wrapperStyles.paddingRight) +
parseFloat(wrapperStyles.paddingRight)); parseFloat(wrapperStyles.borderLeftWidth) +
parseFloat(wrapperStyles.borderRightWidth);
const availableContentWidth = wrapperEle.offsetWidth - nonContentWidth;
const label = wrapperEle.querySelector<HTMLSpanElement>( const label = wrapperEle.querySelector<HTMLSpanElement>(
'dt > [data-contents]', 'dt > [data-contents]',
@ -349,8 +351,12 @@ function useFieldOverflow() {
'dd > [data-contents]', 'dd > [data-contents]',
); );
setIsLabelOverflowing(label ? label.scrollWidth > maxWidth : false); setIsLabelOverflowing(
setIsValueOverflowing(value ? value.scrollWidth > maxWidth : false); label ? label.scrollWidth > availableContentWidth : false,
);
setIsValueOverflowing(
value ? value.scrollWidth > availableContentWidth : false,
);
}, []); }, []);
const observer = useResizeObserver(handleRecalculate); const observer = useResizeObserver(handleRecalculate);

2
app/javascript/mastodon/components/account_header/styles.module.scss
View File

@ -356,7 +356,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
&.fieldItem { &.fieldItem {
border-color: var(--color-border-success-soft); 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
} }
} }