ENG-4718 fix(portal): truncate text in the additional tab on list det…

…ails route (#917)

## Affected Packages

Apps

- [ ] data populator
- [x] portal
- [ ] template

Packages

- [ ] 1ui
- [ ] api
- [ ] graphql
- [ ] protocol
- [ ] sdk

Tools

- [ ] tools

## Overview

When visiting List Details, if the username for the additional tab was >
12 characters it was causing the text to overflow out of the tab.

## Screen Captures


![image](https://github.com/user-attachments/assets/a546fe75-3867-44b3-9c49-55d6b1902168)

## Declaration

- [x] I hereby declare that I have abided by the rules and regulations
as outlined in the
[CONTRIBUTING.md](https://github.com/0xIntuition/intuition-ts/blob/main/CONTRIBUTING.md)

apps/portal/app/routes/app+/list+/$id+/index.tsx

@@ -12,6 +12,7 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Trunctacular,
 } from '@0xintuition/1ui'
 import {
   ClaimPresenter,
@@ -296,7 +297,12 @@ export default function ListOverview() {
                         <ListTabIdentityDisplay
                           imgSrc={additionalUserObject?.image}
                         >
-                          {additionalUserObject?.display_name ?? 'Additional'}
+                          <Trunctacular
+                            value={
+                              additionalUserObject?.display_name ?? 'Additional'
+                            }
+                            maxStringLength={12}
+                          />
                         </ListTabIdentityDisplay>
                       }
                       onClick={(e) => {

apps/portal/app/routes/readonly+/list+/$id+/index.tsx

@@ -8,6 +8,7 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Trunctacular,
 } from '@0xintuition/1ui'
 import {
   ClaimPresenter,
@@ -218,7 +219,12 @@ export default function ReadOnlyListOverview() {
                         <ListTabIdentityDisplay
                           imgSrc={additionalUserObject?.image}
                         >
-                          {additionalUserObject?.display_name ?? 'Additional'}
+                          <Trunctacular
+                            value={
+                              additionalUserObject?.display_name ?? 'Additional'
+                            }
+                            maxStringLength={12}
+                          />
                         </ListTabIdentityDisplay>
                       }
                       onClick={(e) => {