fix: Mention overflow

This will broke MFM overflow, but whatever... MFM in Akkoma is broken anyway
null2264 · Oct 30, 2023 · 98e326b · 98e326b
1 parent a59ba57
commit 98e326b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/soapbox/components/mention.tsx b/src/soapbox/components/mention.tsx
@@ -2,11 +2,11 @@ import React, { useLayoutEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useSoapboxConfig } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
 import HoverRefWrapper from './hover-ref-wrapper';
-import { Avatar } from './ui';
+import { Avatar, Text } from './ui';
 
 import type { Sizes } from 'soapbox/components/ui/text/text';
 import type { Mention as MentionEntity } from 'soapbox/schemas';
@@ -23,8 +23,9 @@ export const Mention: React.FC<IMention> = ({ mention, textSize = 'md' }) => {
   const getchAccount = () => {
     if (mention.id !== '') dispatch(fetchAccount(mention.id));
   };
-  const account: any = useAppSelector(state => ((mention.id !== '') ? getAccount(state, mention.id) : null) || { id: mention.id, fqn: mention.acct, acct: mention.acct, url: mention.url, username: mention.username, avatar: '' });
+  const account: any = useAppSelector(state => ((mention.id !== '') ? getAccount(state, mention.id) : null) || { id: mention.id, fqn: mention.acct, acct: mention.acct, url: mention.url, username: mention.username, avatar: '', domain: mention.acct.split('@')[1] || 'unknown' });
   const avatarSize = textSize === 'lg' ? 28 : 20;
+  const { displayFqn } = useSoapboxConfig();
 
   useLayoutEffect(() => {
     getchAccount();
@@ -34,7 +35,12 @@ export const Mention: React.FC<IMention> = ({ mention, textSize = 'md' }) => {
     <Link onClick={e => e.stopPropagation()} to={`/@${account.acct}`} title={`@${account.fqn}`} className='mention group inline-block rounded-full bg-primary-200 py-1 pl-1 pr-2 text-primary-600 dark:bg-primary-800 dark:text-primary-400'>
       <HoverRefWrapper key={account.id} accountId={account.id} className='inline-flex items-center align-top group-hover:underline'>
         <Avatar size={avatarSize} src={account.avatar} className='mr-1.5 inline-flex items-center align-bottom' />
-        <span>@{account.acct}</span>
+        <p className='truncate'>
+          <Text theme='mention' size={textSize} direction='ltr' tag='span'>@{account.username}</Text>
+          {(displayFqn || account.acct.split('@')[1] === account.domain) && (
+            <Text theme='mention-muted' size={textSize} direction='ltr' tag='span'>@{account.domain}</Text>
+          )}
+        </p>
       </HoverRefWrapper>
     </Link>
   );

diff --git a/src/soapbox/components/status-content.tsx b/src/soapbox/components/status-content.tsx
@@ -92,7 +92,7 @@ const StatusContent: React.FC<IStatusContent> = ({
             const matches = [...node.attribs.href.matchAll(/^http(?:s)?:\/\/((?:[a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,})\/(?:@|users?\/)(\S+)/gm)][0];
 
             if (matches) {
-              return (<Mention mention={{ acct: `${matches[3]}@${matches[1]}`, url: node.attribs.href, id: '', username: '' }} textSize={textSize} />);
+              return (<Mention mention={{ acct: `${matches[3]}@${matches[1]}`, url: node.attribs.href, id: '', username: matches[3] }} textSize={textSize} />);
             }
           }
         }
@@ -145,7 +145,7 @@ const StatusContent: React.FC<IStatusContent> = ({
 
   const withSpoiler = status.spoiler_text.length > 0;
 
-  const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-x-visible overflow-y-clip relative focus:outline-none';
+  const baseClassName = 'text-gray-900 dark:text-gray-100 break-words text-ellipsis overflow-clip relative focus:outline-none';
 
   const content = parse(parsedHtml, options);
   const direction = isRtl(status.search_index) ? 'rtl' : 'ltr';

diff --git a/src/soapbox/components/ui/text/text.tsx b/src/soapbox/components/ui/text/text.tsx
@@ -5,6 +5,8 @@ const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
   primary: 'text-primary-600 dark:text-accent-blue',
+  mention: 'text-primary-600 dark:text-primary-400',
+  'mention-muted': 'text-primary-500',
   'not-so-subtle': 'text-gray-800 dark:text-gray-400',
   muted: 'text-gray-700 dark:text-gray-600',
   subtle: 'text-gray-400 dark:text-gray-500',