matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: fix poll options text overflow

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-06-04 15:57:04 +02:00
parent a2357bbdbd
commit 1d2eeed30c
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/pl-fe/src/components/polls/poll-option.tsx
View File

@ -31,7 +31,7 @@ interface IPollOptionText extends IPollOption {
percent: number;
}
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle }) => {
const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active, onToggle, truncate }) => {
const handleOptionChange: React.EventHandler<React.ChangeEvent> = () => onToggle(index);
const handleOptionKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
@ -61,12 +61,13 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
/>
<div className='grid w-full items-center'>
<div className='col-start-1 row-start-1 ml-4 mr-6 justify-self-center'>
<div className='text-primary-600 dark:text-white'>
<div className='col-start-1 row-start-1 max-w-full justify-self-center overflow-hidden pl-4 pr-6'>
<div className={clsx('text-primary-600 dark:text-white', { truncate })}>
<Text
theme='inherit'
weight='medium'
align='center'
className='line-clamp-1 inline text-ellipsis break-words'
>
<ParsedContent html={option.title} emojis={poll.emojis} />
</Text>
@ -103,10 +104,11 @@ interface IPollOption {
active: boolean;
onToggle: (value: number) => void;
language?: string | null;
truncate?: boolean;
}
const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
const { index, poll, option, showResults, language } = props;
const { index, poll, option, showResults, language, truncate } = props;
const intl = useIntl();
@ -132,11 +134,11 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
>
<PollPercentageBar percent={percent} leading={leading} />
<div className='text-primary-600 dark:text-white'>
<div className='overflow-hidden text-primary-600 dark:text-white'>
<Text
theme='inherit'
weight='medium'
className='relative'
className={clsx('relative break-words', { truncate })}
>
<ParsedContent html={(language && option.title_map) && option.title_map[language] || option.title} emojis={poll.emojis} />
</Text>

4
packages/pl-fe/src/components/polls/poll.tsx
View File

@ -19,13 +19,14 @@ interface IPoll {
id: string;
status?: Pick<Status, 'url'>;
language?: string;
truncate?: boolean;
}
const messages = defineMessages({
multiple: { id: 'poll.choose_multiple', defaultMessage: 'Choose as many as you\'d like.' },
});
const Poll: React.FC<IPoll> = ({ id, status, language }): JSX.Element | null => {
const Poll: React.FC<IPoll> = ({ id, status, language, truncate }): JSX.Element | null => {
const { openModal } = useModalsStore();
const dispatch = useAppDispatch();
const intl = useIntl();
@ -89,6 +90,7 @@ const Poll: React.FC<IPoll> = ({ id, status, language }): JSX.Element | null =>
active={!!selected[i]}
onToggle={toggleOption}
language={language}
truncate={truncate}
/>
))}
</Stack>

4
packages/pl-fe/src/components/status-content.tsx
View File

@ -269,7 +269,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
}
if (status.poll_id) {
output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} truncate={collapsable} />);
}
if (translatable) {
@ -305,7 +305,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
}
if (status.poll_id) {
output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} />);
output.push(<Poll id={status.poll_id} key='poll' status={status} language={statusMeta.currentLanguage} truncate={collapsable} />);
}
if (translatable) {