fix: trimmed long file names for better UX (#760)

Fixes #755 

### Notes for Reviewers
- The max length of the title is set to be `16`
- If the length of the title is <16 it returns the original one.
- Or else the title will be the first 8 characters (start) and last 8
characters (end)
- The truncated file name will look like `start...end`

### Screenshot for reference


![image](https://github.com/documenso/documenso/assets/88539464/565e4868-7bb1-4b46-9cb0-886d542b8a01)

---------

Co-authored-by: Catalin Pit <25515812+catalinpit@users.noreply.github.com>

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

@@ -17,6 +17,8 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -51,6 +53,8 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const { user } = await getServerComponentSession();
@@ -82,7 +86,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     >
       <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}>
-          {document.title}
+          {truncatedTitle}
         </h1>
 
         <div className="mt-2.5 flex items-center gap-x-6">