fix: long media name hides the thumbnail (#1042)

* fix bug long media name hides the thumbnail

* change css from hover to span

---------

Co-authored-by: Lan Nguyen Thuy <[email protected]>

Author: NguyenThuyLan

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -106,7 +106,7 @@ export class UUICardMediaElement extends UUICardElement {
         <!--
         TODO: Implement info box when pop-out is ready
         -->
-        <span id="name">${this.name}</span>
+        <span id="name" title="${this.name}">${this.name}</span>
         <small id="detail">${this.detail}<slot name="detail"></slot></small>
       </div>
     `;
@@ -191,6 +191,15 @@ export class UUICardMediaElement extends UUICardElement {
         text-decoration: underline;
       }
 
+      #open-part #name {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        overflow-wrap: anywhere;
+      }
+
       :host([image]:not([image=''])) #open-part {
         transition: opacity 0.5s 0.5s;
         opacity: 0;