fix: truncation of titles to fix UI breaks (#1162)

Updates various areas of the application to handle longer titles and content
more gracefully.

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-recent-activity.tsx

@@ -133,7 +133,12 @@ export const DocumentPageViewRecentActivity = ({
                     ))}
                 </div>
 
-                <p className="text-muted-foreground dark:text-muted-foreground/70 flex-auto py-0.5 text-xs leading-5">
+                <p
+                  className="text-muted-foreground dark:text-muted-foreground/70 flex-auto truncate py-0.5 text-xs leading-5"
+                  title={`${formatDocumentAuditLogAction(auditLog, userId).prefix} ${
+                    formatDocumentAuditLogAction(auditLog, userId).description
+                  }`}
+                >
                   <span className="text-foreground font-medium">
                     {formatDocumentAuditLogAction(auditLog, userId).prefix}
                   </span>{' '}

apps/web/src/app/(dashboard)/documents/[id]/document-page-view.tsx

@@ -110,7 +110,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
         Documents
       </Link>
 
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row justify-between truncate">
         <div>
           <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
             {document.title}

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -117,7 +117,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         Document
       </Link>
 
-      <div className="flex flex-col justify-between sm:flex-row">
+      <div className="flex flex-col justify-between truncate sm:flex-row">
         <div>
           <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
             {document.title}

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -178,7 +178,7 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
         <DialogContent>
           <DialogTitle>
             Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
+            <div className="text-muted-foreground">({recipient.email})</div>
           </DialogTitle>
 
           <div>

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -214,7 +214,7 @@ export const SignatureField = ({
         <DialogContent>
           <DialogTitle>
             Sign as {recipient.name}{' '}
-            <span className="text-muted-foreground">({recipient.email})</span>
+            <div className="text-muted-foreground h-5">({recipient.email})</div>
           </DialogTitle>
 
           <div className="">

apps/web/src/app/(signing)/sign/[token]/signing-page-view.tsx

@@ -20,7 +20,6 @@ import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
-import { truncateTitle } from '~/helpers/truncate-title';
 
 import { CheckboxField } from './checkbox-field';
 import { DateField } from './date-field';
@@ -46,24 +45,28 @@ export const SigningPageView = ({
   fields,
   completedFields,
 }: SigningPageViewProps) => {
-  const truncatedTitle = truncateTitle(document.title);
-
   const { documentData, documentMeta } = document;
 
   return (
     <div className="mx-auto w-full max-w-screen-xl">
       <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-        {truncatedTitle}
+        {document.title}
       </h1>
 
       <div className="mt-2.5 flex items-center gap-x-6">
+        <p
+          className="text-muted-foreground truncate"
+          title={document.User.name ? document.User.name : ''}
+        >
+          {document.User.name}
+        </p>
+      </div>
       <p className="text-muted-foreground">
-          {document.User.name} ({document.User.email}) has invited you to{' '}
+        ({document.User.email}) has invited you to{' '}
         {recipient.role === RecipientRole.VIEWER && 'view'}
         {recipient.role === RecipientRole.SIGNER && 'sign'}
         {recipient.role === RecipientRole.APPROVER && 'approve'} this document.
       </p>
-      </div>
 
       <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
         <Card

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -4,6 +4,7 @@ import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 import { MenuIcon, SearchIcon } from 'lucide-react';
 
@@ -41,6 +42,18 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  const pathname = usePathname();
+
+  const isPathTeamUrl = (teamUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/t/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === teamUrl;
+  };
+
+  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+
   return (
     <header
       className={cn(
@@ -60,7 +73,10 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
 
         <DesktopNav setIsCommandMenuOpen={setIsCommandMenuOpen} />
 
-        <div className="flex gap-x-4 md:ml-8">
+        <div
+          className="flex gap-x-4 md:ml-8"
+          title={selectedTeam ? selectedTeam.name : user.name ?? ''}
+        >
           <MenuSwitcher user={user} teams={teams} />
         </div>
 

packages/ui/primitives/avatar.tsx

@@ -78,7 +78,9 @@ const AvatarWithText = ({
       <AvatarFallback className="text-xs text-gray-400">{avatarFallback}</AvatarFallback>
     </Avatar>
 
-    <div className={cn('flex flex-col text-left text-sm font-normal', textSectionClassName)}>
+    <div
+      className={cn('flex flex-col truncate text-left text-sm font-normal', textSectionClassName)}
+    >
       <span className="text-foreground truncate">{primaryText}</span>
       <span className="text-muted-foreground truncate text-xs">{secondaryText}</span>
     </div>

packages/ui/primitives/dialog.tsx

@@ -113,7 +113,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    className={cn('truncate text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ));