From 838d86fb66ca91a79c9bde6dc62c25175ccb584e Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 28 Oct 2024 17:39:26 -0300
Subject: [PATCH] Fix warning from display-name components

---
 src/components/display-name-inline.tsx        |  2 +-
 src/components/display-name.tsx               |  4 +-
 .../modals/zap-split/display-name-row.tsx     | 53 -------------------
 3 files changed, 3 insertions(+), 56 deletions(-)
 delete mode 100644 src/features/ui/components/modals/zap-split/display-name-row.tsx

diff --git a/src/components/display-name-inline.tsx b/src/components/display-name-inline.tsx
index 0f754fe07..2e30b6b29 100644
--- a/src/components/display-name-inline.tsx
+++ b/src/components/display-name-inline.tsx
@@ -32,7 +32,7 @@ const DisplayNameInline: React.FC<IDisplayName> = ({ account, withSuffix = true
   );
 
   // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
+  const suffix = (<span className='relative block max-w-full truncate'>@{getAcct(account, displayFqn)}</span>);
 
   return (
     <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
diff --git a/src/components/display-name.tsx b/src/components/display-name.tsx
index 130e1f0df..81f577fce 100644
--- a/src/components/display-name.tsx
+++ b/src/components/display-name.tsx
@@ -33,10 +33,10 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withSuffix = t
     </HStack>
   );
 
-  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
+  const suffix = (<span className='relative text-[14px] font-semibold'>@{getAcct(account, displayFqn)}</span>); // eslint-disable-line formatjs/no-literal-string-in-jsx
 
   return (
-    <span className='display-name' data-testid='display-name'>
+    <span className='relative block max-w-full truncate' data-testid='display-name'>
       <HoverRefWrapper accountId={account.id} inline>
         {displayName}
       </HoverRefWrapper>
diff --git a/src/features/ui/components/modals/zap-split/display-name-row.tsx b/src/features/ui/components/modals/zap-split/display-name-row.tsx
deleted file mode 100644
index b6c54a85c..000000000
--- a/src/features/ui/components/modals/zap-split/display-name-row.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { HStack, Text } from 'soapbox/components/ui';
-import VerificationBadge from 'soapbox/components/verification-badge';
-import { useSoapboxConfig } from 'soapbox/hooks';
-import { getAcct } from 'soapbox/utils/accounts';
-
-import type { Account } from 'soapbox/schemas';
-
-interface IDisplayName {
-  account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
-  withSuffix?: boolean;
-}
-/**
- * This component is different from other display name components because it displays the name inline.
- *
- * @param {IDisplayName} props - The properties for this component.
- * @param {Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>} props.account - The account object contains all the metadata for an account, such as the display name, ID, and more.
- * @param {boolean} [props.withSuffix=true] - Determines whether to show the account suffix (eg, @danidfra).
- *
- * @returns {JSX.Element} The DisplayNameRow component.
- */
-const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true }) => {
-  const { displayFqn = false } = useSoapboxConfig();
-  const { verified } = account;
-
-  const displayName = (
-    <HStack space={1} alignItems='center' justifyContent='center' grow>
-      <Text
-        size='sm'
-        weight='normal'
-        truncate
-        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
-      />
-
-      {verified && <VerificationBadge />}
-    </HStack>
-  );
-
-  // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
-
-  return (
-    <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
-      {displayName}
-      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-      <span className='hidden text-2xl font-bold sm:block'>-</span>
-      {withSuffix && suffix}
-    </div>
-  );
-};
-
-export default DisplayNameRow;