handle text-overflow ellispis on Spec-preview template

Author: lucaslyl

packages/boxel-ui/addon/src/components/button/index.gts

@@ -103,7 +103,6 @@ export default class ButtonComponent extends Component<Signature> {
           height: min-content;
           align-items: center;
           border-radius: 100px;
-          word-break: var(--boxel-button-word-break, break-word);
           transition:
             background-color var(--boxel-transition),
             border var(--boxel-transition);

packages/host/app/components/operator-mode/code-submode/spec-preview.gts

@@ -287,7 +287,7 @@ class SpecPreviewContent extends GlimmerComponent<ContentSignature> {
                 {{on 'click' this.viewSpecInstance}}
                 data-test-view-spec-instance
               >
-                View Instance
+                <span class='view-instance-btn-text'>View Instance</span>
               </BoxelButton>
             </div>
             {{#if this.displayIsolated}}
@@ -340,6 +340,14 @@ class SpecPreviewContent extends GlimmerComponent<ContentSignature> {
         align-items: center;
         gap: var(--boxel-sp-xxxs);
       }
+      .view-instance-btn-text {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+      }
     </style>
   </template>
 }