Ellipsize pill component contents when too large (#1133)

cardstack · Apr 6, 2024 · 3bbcd1b · 3bbcd1b
1 parent 4820358
commit 3bbcd1b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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>
 }