Ellipsize pill component contents when too large

cardstack · Apr 3, 2024 · 785b8bd · 785b8bd
1 parent 7a43d36
commit 785b8bd
Showing 1 changed file with 12 additions and 1 deletion.
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>
 }