fix: 🎨

src/components/Embedded/EmbeddedMention.tsx

@@ -6,7 +6,7 @@ export function EmbeddedMention({ userId }: { userId: string }) {
     <Username
       userId={userId}
       showAt
-      className="text-highlight font-normal inline-block"
+      className="text-highlight font-normal inline"
       withoutSkeleton
     />
   )

src/components/Note/index.tsx

@@ -37,14 +37,14 @@ export default function Note({
           <div className="flex gap-2 items-center">
             <Username
               userId={event.pubkey}
-              className={`font-semibold flex ${size === 'small' ? 'text-sm' : ''}`}
+              className={`font-semibold flex truncate ${size === 'small' ? 'text-sm' : ''}`}
               skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
             />
             {usingClient && size === 'normal' && (
-              <div className="text-xs text-muted-foreground truncate">using {usingClient}</div>
+              <div className="text-xs text-muted-foreground shrink-0">using {usingClient}</div>
             )}
           </div>
-          <div className="text-xs text-muted-foreground line-clamp-1">
+          <div className="text-xs text-muted-foreground shrink-0">
             <FormattedTimestamp timestamp={event.created_at} />
           </div>
         </div>

src/components/ReplyNote/index.tsx

@@ -29,7 +29,7 @@ export default function ReplyNote({
             className="text-sm font-semibold text-muted-foreground hover:text-foreground truncate"
             skeletonClassName="h-3"
           />
-          <div className="text-xs text-muted-foreground">
+          <div className="text-xs text-muted-foreground shrink-0">
             <FormattedTimestamp timestamp={event.created_at} />
           </div>
         </div>

src/components/Username/index.tsx

@@ -30,7 +30,7 @@ export default function Username({
   return (
     <HoverCard>
       <HoverCardTrigger asChild>
-        <div className={cn('max-w-fit', className)}>
+        <div className={className}>
           <SecondaryPageLink
             to={toProfile(pubkey)}
             className="truncate hover:underline"
@@ -65,7 +65,7 @@ export function SimpleUsername({
   const { username } = profile
 
   return (
-    <div className={cn('max-w-fit', className)}>
+    <div className={className}>
       {showAt && '@'}
       {username}
     </div>