From 2ed54d1304daf63a66e8e68245c7bffb11033f7d Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Thu, 13 Mar 2025 09:57:54 +0700
Subject: [PATCH 1/2] fix bug long media name hides the thumbnail

---
 packages/uui-card-media/lib/uui-card-media.element.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 265401907..0af560c9e 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/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>
     `;
@@ -189,6 +189,12 @@ export class UUICardMediaElement extends UUICardElement {
       }
       #open-part:hover #name {
         text-decoration: underline;
+        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 {

From 74cf8058c1fa5f67d51f6d7f4a51923961a7d991 Mon Sep 17 00:00:00 2001
From: Lan Nguyen Thuy <lnt@umbraco.dk>
Date: Thu, 13 Mar 2025 10:30:28 +0700
Subject: [PATCH 2/2] change css from hover to span

---
 packages/uui-card-media/lib/uui-card-media.element.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 0af560c9e..6ec519c59 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -189,6 +189,9 @@ export class UUICardMediaElement extends UUICardElement {
       }
       #open-part:hover #name {
         text-decoration: underline;
+      }
+
+      #open-part #name {
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;