修复详情页演职人员图标与片段悬停布局

Author: cropflre

web/src/components/media/CastGrid.tsx

@@ -66,7 +66,10 @@ export default function CastGrid({ persons }: CastGridProps) {
   return (
     <section className="nv-cast-grid-section" aria-labelledby="cast-grid-title">
       <div className="nv-cast-grid-header">
-        <h2 id="cast-grid-title" className="nv-section-title">{t('castGrid.title')}</h2>
+        <h2 id="cast-grid-title" className="nv-section-title inline-flex items-center gap-2">
+          <Users size={17} className="text-[var(--nv-action-primary)]" aria-hidden="true" />
+          {t('castGrid.title')}
+        </h2>
         <span>{sortedPersons.length}</span>
       </div>
 

web/src/components/media/hero-section-backdrop.css

@@ -1,6 +1,7 @@
 .nv-detail-hero-backdrop-shell {
   position: relative;
   isolation: isolate;
+  overflow: hidden;
 }
 
 .nv-detail-hero-local-backdrop {
@@ -9,6 +10,8 @@
   z-index: 0;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
+  max-width: none;
+  max-height: none;
   object-fit: cover;
   object-position: center 32%;
   pointer-events: none;

web/src/styles/ui-media-detail.css

@@ -312,6 +312,30 @@
 .nv-cast-rail .nv-person-card-artwork { border-radius: 5px; }
 .nv-cast-rail .nv-person-card:hover .nv-person-card-artwork { transform: translateY(-1px); box-shadow: none; }
 
+/* Highlight previews swap from a thumbnail to an animated asset on hover.
+ * Keep every card bound to the responsive grid so the replacement asset's
+ * intrinsic dimensions can never resize the card or reflow the section. */
+.nv-highlight-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--nv-highlight-preview-count, 4), minmax(0, 1fr));
+  align-items: stretch;
+  gap: 12px;
+}
+.nv-highlight-card {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+}
+.nv-highlight-card-media {
+  width: 100%;
+  min-width: 0;
+}
+.nv-highlight-card-media > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .nv-detail-section-heading {
   display: flex;
   align-items: flex-end;