js
const SalesChannelDescription = ({ salesChannel }) => {
const spanRef = useRef<HTMLSpanElement>(null);
const [isOverflowing, setIsOverflowing] = useState(false);
useEffect(() => {
const el = spanRef.current;
if (el) {
setIsOverflowing(el.scrollWidth > el.clientWidth);
}
}, [salesChannel.description]);
return (
<span
ref={spanRef}
className="text-small text-grey-50"
title={isOverflowing ? salesChannel.description || '' : undefined}
style={{
display: 'inline-block',
maxWidth: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{salesChannel.description}
</span>
);
};
