fixup! feat(summary): route episode cards to the episode drawer

Author: seferturan

projects/client/src/lib/sections/summary/components/episode-drawer/_internal/EpisodeInfoHeader.svelte

@@ -178,29 +178,35 @@
   </div>
 
   <div class="episode-info-meta">
-    {#if subtitle != null}
-      <p class="secondary small" in:fade={fadeIn}>{subtitle}</p>
-    {:else}
-      <Skeleton width="var(--ni-220)" height="var(--ni-14)" />
-    {/if}
+    <div class="episode-info-meta-line">
+      {#if subtitle != null}
+        <p class="secondary small" in:fade={fadeIn}>{subtitle}</p>
+      {:else}
+        <Skeleton width="var(--ni-220)" height="var(--ni-14)" />
+      {/if}
+    </div>
 
-    {#if isCrewLoading}
-      <Skeleton width="var(--ni-140)" height="var(--ni-14)" />
-    {:else if mainCredit}
-      <p class="small episode-main-credit" in:fade={fadeIn}>
-        <MessageWithLink
-          message={mainCredit.text}
-          href={UrlBuilder.people(mainCredit.key, mainCredit.positions)}
-          target="_self"
-        />{#if mainCredit.others?.[0]}{creditSeparator}<Link
-            href={UrlBuilder.people(
-              mainCredit.others[0].key,
-              mainCredit.positions,
-            )}
-            target="_self">{mainCredit.others[0].name}</Link
-          >{/if}
-      </p>
-    {/if}
+    <!-- Always reserved: not every episode has a director, so the line keeps
+         its height whether it holds a credit, a skeleton, or nothing. -->
+    <div class="episode-info-meta-line">
+      {#if isCrewLoading || !entry}
+        <Skeleton width="var(--ni-140)" height="var(--ni-14)" />
+      {:else if mainCredit}
+        <p class="small episode-main-credit" in:fade={fadeIn}>
+          <MessageWithLink
+            message={mainCredit.text}
+            href={UrlBuilder.people(mainCredit.key, mainCredit.positions)}
+            target="_self"
+          />{#if mainCredit.others?.[0]}{creditSeparator}<Link
+              href={UrlBuilder.people(
+                mainCredit.others[0].key,
+                mainCredit.positions,
+              )}
+              target="_self">{mainCredit.others[0].name}</Link
+            >{/if}
+        </p>
+      {/if}
+    </div>
   </div>
 
   <div class="episode-info-actions">
@@ -215,9 +221,7 @@
           />
         </RenderFor>
 
-        <div class="episode-info-rate-now">
-          <RateNow type="episode" media={entry} {show} />
-        </div>
+        <RateNow type="episode" media={entry} {show} />
       </div>
     {:else}
       <Skeleton
@@ -237,7 +241,7 @@
               label={m.button_label_expand_media_overview({
                 title: show.title,
               })}
-              lineCount={6}
+              lineCount={3}
             >
               {entry.overview}
             </ClampedText>
@@ -355,6 +359,15 @@
     text-align: center;
   }
 
+  // Each line keeps a fixed height so swapping skeleton <-> text, or having no
+  // credit at all, never shifts the layout below.
+  .episode-info-meta-line {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--ni-16);
+  }
+
   .episode-main-credit {
     :global(.trakt-link) {
       text-decoration-thickness: var(--ni-1);
@@ -367,6 +380,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+
+    // Match the skeleton / actions-bar height so the area never collapses
+    // below it while the entry loads or when there are no actions to show.
+    min-height: var(--ni-56);
   }
 
   .episode-info-actions-content {
@@ -382,18 +399,18 @@
     }
   }
 
-  .episode-info-rate-now {
-    display: flex;
-    justify-content: center;
-  }
-
   .episode-info-overview {
     align-self: stretch;
 
     margin-top: var(--gap-s);
 
     text-align: start;
 
+    // Reserve exactly three lines (matching ClampedText's lineCount and 150%
+    // line-height) so the skeleton and the loaded overview occupy the same
+    // height and the tabs below never jump.
+    min-height: calc(3 * var(--font-size-text) * 1.5);
+
     :global(.trakt-collapsable-content-button) {
       width: 100%;
       box-sizing: border-box;