From 3bbcd1b51a91faed55a52d819b756301e1dfbf1a Mon Sep 17 00:00:00 2001
From: FadhlanR <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 13:48:05 +0700
Subject: [PATCH] Ellipsize pill component contents when too large (#1133)

---
 packages/base/field-component.gts          |  5 +++++
 packages/host/app/components/card-pill.gts | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 6eca02d93b..031cb297c0 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -94,6 +94,10 @@ export function getBoxComponent(
     };
   }
 
+  function title(cardOrField: BaseDef, format: Format) {
+    return isCard(cardOrField) && format === 'atom' ? cardOrField.title : '';
+  }
+
   let component: TemplateOnlyComponent<{
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
@@ -112,6 +116,7 @@ export function getBoxComponent(
             fieldType=field.fieldType
             fieldName=field.name
           }}
+          title={{title model.value f.format}}
           data-test-card-format={{f.format}}
           data-test-field-component-card
           {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index 0743660470..cfcf86e2b9 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -46,7 +46,9 @@ export default class CardPill extends Component<CardPillSignature> {
         </RealmInfoProvider>
       </:icon>
       <:default>
-        <this.component @displayContainer={{false}} />
+        <div class='card-content'>
+          <this.component @displayContainer={{false}} />
+        </div>
         {{#if @removeCard}}
           <IconButton
             class='remove-button'
@@ -86,6 +88,15 @@ export default class CardPill extends Component<CardPillSignature> {
       .is-autoattached {
         border-style: dashed;
       }
+      .card-content {
+        display: flex;
+        max-width: 100px;
+      }
+      :deep(.atom-format) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     </style>
   </template>
 }