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

[Glitch] Fix custom profile field overflow

Browse Source 
Port 2a894970ac8d052b196969668c5dd8c81c48cca0 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-06-19 11:51:12 +02:00 committed by Claire
parent 2f491f0d48
commit 81590f1c9c
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/flavours/glitch/components/account_header/fields.tsx
View File

@ -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<HTMLSpanElement>(
'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);

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

@ -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
}
}