moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix break-words with HTML

This commit is contained in:
Chewbacca 2022-11-03 15:22:18 -04:00
parent 7571b88c51
commit fe55152667
2 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/features/chats/components/chat-message-list.tsx
View File

@ -314,7 +314,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
tabIndex={0} tabIndex={0}
> >
{maybeRenderMedia(chatMessage)} {maybeRenderMedia(chatMessage)}
<Text size='sm' theme='inherit' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} /> <Text size='sm' theme='inherit' className='break-word-nested' dangerouslySetInnerHTML={{ __html: parseContent(chatMessage) }} />
</div> </div>
<div className={classNames({ 'order-1': !isMyMessage })}> <div className={classNames({ 'order-1': !isMyMessage })}>

4
app/styles/application.scss
View File

@ -83,6 +83,10 @@
@tailwind utilities; @tailwind utilities;
@layer utilities { @layer utilities {
.break-word-nested > p {
word-break: break-word;
}
.shadow-inset { .shadow-inset {
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
} }