From 321af4feebc171c7531f3803ddd62d37a708935e Mon Sep 17 00:00:00 2001
From: Vital <rob@creative-element.net>
Date: Fri, 15 Nov 2024 11:39:00 -0500
Subject: [PATCH] ENG-4718 fix(portal): truncate text in the additional tab on
 list details 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      | 8 +++++++-
 apps/portal/app/routes/readonly+/list+/$id+/index.tsx | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/portal/app/routes/app+/list+/$id+/index.tsx b/apps/portal/app/routes/app+/list+/$id+/index.tsx
index f8246524a..e7951c487 100644
--- a/apps/portal/app/routes/app+/list+/$id+/index.tsx
+++ b/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) => {
diff --git a/apps/portal/app/routes/readonly+/list+/$id+/index.tsx b/apps/portal/app/routes/readonly+/list+/$id+/index.tsx
index bdecd3d0c..4ec8d9c92 100644
--- a/apps/portal/app/routes/readonly+/list+/$id+/index.tsx
+++ b/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) => {