From 52efd729e2a54341bea8e1bfeba4908df2d8adbc Mon Sep 17 00:00:00 2001
From: Trung Vo <trungk18@gmail.com>
Date: Sun, 14 Jul 2024 16:35:37 +0800
Subject: [PATCH] feat: add title view-transition-name

---
 .../angular-spotify/src/custom/_view-transitions.scss | 11 +++++++++--
 .../src/lib/media-summary.component.scss              |  2 +-
 libs/web/shared/ui/media/src/lib/card.component.html  |  4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/angular-spotify/src/custom/_view-transitions.scss b/apps/angular-spotify/src/custom/_view-transitions.scss
index 943959a6..9c58d996 100644
--- a/apps/angular-spotify/src/custom/_view-transitions.scss
+++ b/apps/angular-spotify/src/custom/_view-transitions.scss
@@ -1,11 +1,18 @@
-.with-view-transition as-media-cover {
-  view-transition-name: media-cover;
+.with-view-transition {
+  as-media-cover {
+    view-transition-name: media-cover;
+  }
+
+  h2 {
+    view-transition-name: media-title;
+  }
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
diff --git a/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss b/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss
index cbc1d9e7..58cebdcb 100644
--- a/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss
+++ b/libs/web/shared/ui/media-summary/src/lib/media-summary.component.scss
@@ -2,7 +2,7 @@
   min-height: 250px;
   max-height: 450px;
   gap: 24px;
-  grid-template-columns: minmax(120px, 192px) 1fr;
+  grid-template-columns: minmax(160px, 240px) 1fr;
   align-items: flex-end;
   @apply grid pb-6;
 }
diff --git a/libs/web/shared/ui/media/src/lib/card.component.html b/libs/web/shared/ui/media/src/lib/card.component.html
index c47e7ed7..a18ba02e 100644
--- a/libs/web/shared/ui/media/src/lib/card.component.html
+++ b/libs/web/shared/ui/media/src/lib/card.component.html
@@ -15,9 +15,9 @@
     </as-play-button>
   </div>
   <div class="card-body">
-    <div class="card-title font-bold text-white ellipsis-one-line">
+    <h2 class="card-title font-bold text-white ellipsis-one-line">
       {{ title }}
-    </div>
+    </h2>
     <div class="card-description text-description">
       {{ description }}
     </div>