From 785b8bd51e48bb1abd5c5ece56bae88080e46811 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Wed, 3 Apr 2024 14:07:51 +0700
Subject: [PATCH 1/5] Ellipsize pill component contents when too large

---
 packages/host/app/components/card-pill.gts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

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>
 }

From fae4d7dd2d6af222fd02fff2292455197e2d0e33 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 11:58:21 +0700
Subject: [PATCH 2/5] Use title instead

---
 packages/base/field-component.gts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 6eca02d93b..8e6628669e 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -94,6 +94,10 @@ export function getBoxComponent(
     };
   }
 
+  function title(format: Format) {
+    return format === 'atom' && isCard(model.value) ? model.value.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 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'}}

From e45d319a5f0baa44ce843391e1b9328069e302c9 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 12:17:08 +0700
Subject: [PATCH 3/5] clean up

---
 packages/base/field-component.gts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 8e6628669e..031cb297c0 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -94,8 +94,8 @@ export function getBoxComponent(
     };
   }
 
-  function title(format: Format) {
-    return format === 'atom' && isCard(model.value) ? model.value.title : '';
+  function title(cardOrField: BaseDef, format: Format) {
+    return isCard(cardOrField) && format === 'atom' ? cardOrField.title : '';
   }
 
   let component: TemplateOnlyComponent<{
@@ -116,7 +116,7 @@ export function getBoxComponent(
             fieldType=field.fieldType
             fieldName=field.name
           }}
-          title={{title f.format}}
+          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'}}

From f062ac4ddf940f31c05d34a8ee064283abac96e8 Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 12:27:29 +0700
Subject: [PATCH 4/5] move style to field component

---
 packages/base/field-component.gts          | 4 ++++
 packages/host/app/components/card-pill.gts | 5 -----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 031cb297c0..33e52ac9db 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -172,6 +172,10 @@ export function getBoxComponent(
       .field-component-card.atom-format {
         font: 700 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-xs);
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .field-component-card.atom-format.display-container-true {
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index cfcf86e2b9..14f3f9888d 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -92,11 +92,6 @@ export default class CardPill extends Component<CardPillSignature> {
         display: flex;
         max-width: 100px;
       }
-      :deep(.atom-format) {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     </style>
   </template>
 }

From 4d707826fedf8e4c4407def2f2fcf1fc2bca20dd Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 13:07:06 +0700
Subject: [PATCH 5/5] move styles to card pill

---
 packages/base/field-component.gts          | 4 ----
 packages/host/app/components/card-pill.gts | 5 +++++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 33e52ac9db..031cb297c0 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -172,10 +172,6 @@ export function getBoxComponent(
       .field-component-card.atom-format {
         font: 700 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-xs);
-
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
       }
 
       .field-component-card.atom-format.display-container-true {
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index 14f3f9888d..cfcf86e2b9 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -92,6 +92,11 @@ export default class CardPill extends Component<CardPillSignature> {
         display: flex;
         max-width: 100px;
       }
+      :deep(.atom-format) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     </style>
   </template>
 }