feat: unify scrolling behavior in DetailOverlay for improved user experience, enhancing visual flow between banner and content

Author: suemor233

marchen/.search/index.sqlite

@@ -0,0 +1,5 @@
+name: detail-overlay-unified-scroll
+schema: lite
+createdAt: '2026-05-24T12:39:50.275Z'
+status: archived
+archivedAt: '2026-05-24T12:42:45.434Z'

marchen/archive/2026-05-24-detail-overlay-unified-scroll/.metadata.yaml

@@ -0,0 +1,17 @@
+## 背景
+
+`DetailOverlay` 当前是「banner 固定 + body 独立滚动」双滚动区，poster 用 `margin-top:-120px` 上溢到 banner。滚动时 banner 不动、poster 跟 body 上移，导致 poster 上半被 banner 遮住下半露在内容区，视觉破碎。
+
+改为「统一滚动容器」（Apple TV+ / Infuse 标准模式）：banner 与 body 一起流式滚动，新增 `.library-dt-scroll` 包裹两者并接管滚动。close 按钮保持 absolute 不随滚动。
+
+## 1. 改 DOM
+
+- [x] 1.1 `DetailOverlay.tsx`：在 banner 和 body 外面套一个 `<div className="library-dt-scroll">`（close 按钮仍留在 `.library-dt` 下）
+
+## 2. 改样式
+
+- [x] 2.1 `library.css` `.library-dt`：去掉 `display: flex; flex-direction: column`（不再需要分割两块）
+- [x] 2.2 `library.css` 新增 `.library-dt-scroll`：`height: 100%; overflow-y: auto;` + 复用原 body 滚动条样式
+- [x] 2.3 `library.css` `.library-dt-banner`：去掉 `flex-shrink: 0`（不再是 flex 子项）
+- [x] 2.4 `library.css` `.library-dt-body`：去掉 `flex: 1; overflow-y: auto`，保留 `margin-top: -120px` 与 grid 布局
+- [x] 2.5 `library.css` 滚动条选择器从 `.library-dt-body` 改到 `.library-dt-scroll`

marchen/archive/2026-05-24-detail-overlay-unified-scroll/tasks.md

@@ -25,3 +25,4 @@
 - 2026-05-24: [fix-episode-progress-priority](./archive/2026-05-24-fix-episode-progress-priority/) — 剧集进度列改为实时 pct 优先于 watched 标记，避免曾看完后回拖仍显示 ✓
 - 2026-05-24: [write-last-watched-on-load](./archive/2026-05-24-write-last-watched-on-load/) — 开始播放即写 lastWatchedEpisodeId/At，isWatching 放宽以让浅看作品进入继续观看 Rail
 - 2026-05-24: [fix-library-progress-display](./archive/2026-05-24-fix-library-progress-display/) — ctaLabel 走 lastWatched 指针、删 NEXT 徽章、Hero/Landscape 改用 lastWatched 集的单集进度
+- 2026-05-24: [detail-overlay-unified-scroll](./archive/2026-05-24-detail-overlay-unified-scroll/) — DetailOverlay 改为统一滚动容器，banner 与内容一起流式滚动消除 poster 半截被遮的视觉

marchen/changelog.md

@@ -72,6 +72,7 @@ export const DetailOverlay: FC<DetailOverlayProps> = memo(({ item, onClose, onPl
           <CrossGlyph />
         </button>
 
+        <div className="library-dt-scroll">
         <div className="library-dt-banner">
           {item.imageUrl && (
             <img
@@ -163,6 +164,7 @@ export const DetailOverlay: FC<DetailOverlayProps> = memo(({ item, onClose, onPl
             </div>
           </div>
         </div>
+        </div>
       </div>
     </>
   )

src/renderer/src/page/library/DetailOverlay.tsx

@@ -757,11 +757,21 @@
   background: var(--library-bg-2);
   border-radius: 14px;
   overflow: hidden;
-  display: flex;
-  flex-direction: column;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--library-line-2);
   animation: library-dt-in 0.24s cubic-bezier(0.22, 1, 0.36, 1);
 }
+.library-dt-scroll {
+  height: 100%;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+}
+.library-dt-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+.library-dt-scroll::-webkit-scrollbar-thumb {
+  background: var(--library-panel-2);
+  border-radius: 4px;
+}
 @keyframes library-fade-in {
   from {
     opacity: 0;
@@ -806,7 +816,6 @@
   position: relative;
   height: 320px;
   overflow: hidden;
-  flex-shrink: 0;
   background: var(--library-panel-2);
 }
 .library-dt-banner img {
@@ -826,24 +835,14 @@
 }
 
 .library-dt-body {
-  flex: 1;
-  min-height: 0;
   display: grid;
   grid-template-columns: 220px 1fr;
   gap: 32px;
   padding: 0 40px 40px;
-  overflow-y: auto;
   position: relative;
   margin-top: -120px;
   z-index: 2;
 }
-.library-dt-body::-webkit-scrollbar {
-  width: 8px;
-}
-.library-dt-body::-webkit-scrollbar-thumb {
-  background: var(--library-panel-2);
-  border-radius: 4px;
-}
 
 .library-dt-poster {
   width: 220px;