fix: modal X-Button fixed, xREL debug-endpoint

backend/src/tools/media/routes.js

@@ -309,4 +309,27 @@ router.put('/settings', authenticate, requireAdmin, (req, res) => {
   res.json({ ok: true });
 });
 
+// DEBUG – nach Test entfernen
+router.get('/debug-xrel2', authenticate, async (req, res) => {
+  const title    = req.query.title    || 'Thunderbolts';
+  const original = req.query.original || title;
+  const log = {};
+  try {
+    log.step1_query = title;
+    const searchData = await xrelFetch('/search/ext_info.json', { q: title, type: 'movie', limit: 5 });
+    log.step1_results = (searchData.results || []).map(r => ({ id: r.id, title: r.title, type: r.type }));
+    const extInfoId = (searchData.results || []).find(h => h.type === 'movie')?.id;
+    log.ext_info_id = extInfoId || null;
+    if (extInfoId) {
+      const p2p = await xrelFetch('/p2p/releases.json', { ext_info_id: extInfoId, per_page: 5 });
+      log.p2p_total   = p2p.total_count;
+      log.p2p_sample  = (p2p.list || []).slice(0, 3).map(r => ({ dirname: r.dirname, main_lang: r.main_lang, pub_time: r.pub_time }));
+      const scene = await xrelFetch('/release/ext_info.json', { id: extInfoId, per_page: 5 });
+      log.scene_total  = scene.total_count;
+      log.scene_sample = (scene.list || []).slice(0, 3).map(r => ({ dirname: r.dirname, time: r.time }));
+    }
+  } catch (e) { log.error = e.message; }
+  res.json(log);
+});
+
 module.exports = router;

frontend/src/tools/media.jsx

@@ -495,28 +495,36 @@ function MovieModal({ tmdbId, onClose, mobile }) {
         borderRadius: mobile ? '16px 16px 0 0' : 16,
         width: mobile ? '100%' : 560,
         maxHeight: mobile ? '88vh' : '85vh',
-        overflowY:'auto',
+        display:'flex', flexDirection:'column',
-        WebkitOverflowScrolling:'touch',
         position:'relative',
       }}>
-        {/* Backdrop */}
+        {/* Backdrop + fixer Schließen-Button – NICHT im scrollenden Bereich */}
+        <div style={{ position:'relative', flexShrink:0,
+          borderRadius: mobile ? '16px 16px 0 0' : '16px 16px 0 0',
+          overflow:'hidden',
+          height: detail?.backdrop_path ? 160 : 0,
+          background:'#111',
+        }}>
           {detail?.backdrop_path && (
-          <div style={{ height:160, overflow:'hidden',
-            borderRadius: mobile ? '16px 16px 0 0' : '16px 16px 0 0', flexShrink:0 }}>
             <img src={BACKDROP + detail.backdrop_path} alt=""
               style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', opacity:0.45 }} />
-            <div style={{ position:'absolute', top:0, left:0, right:0, height:160,
-              background:'linear-gradient(to bottom, transparent 30%, #1a1a1f)' }} />
-          </div>
           )}
+          {detail?.backdrop_path && (
+            <div style={{ position:'absolute', inset:0,
+              background:'linear-gradient(to bottom, transparent 30%, #1a1a1f)' }} />
+          )}
+        </div>
 
-        {/* Schließen */}
+        {/* Schließen – sticky außerhalb des Scroll-Containers */}
         <button onClick={onClose} style={{
-          position:'absolute', top:12, right:12, background:'rgba(0,0,0,0.7)',
+          position:'absolute', top:12, right:12,
-          border:'none', borderRadius:'50%', width:34, height:34, cursor:'pointer',
+          background:'rgba(0,0,0,0.75)', border:'none', borderRadius:'50%',
-          color:'#fff', fontSize:18, display:'flex', alignItems:'center', justifyContent:'center', zIndex:1,
+          width:34, height:34, cursor:'pointer', zIndex:10,
+          color:'#fff', fontSize:18, display:'flex', alignItems:'center', justifyContent:'center',
         }}>✕</button>
 
+        {/* Scrollbarer Inhalt */}
+        <div style={{ overflowY:'auto', WebkitOverflowScrolling:'touch', flex:1 }}>
         <div style={{ padding:'16px 20px 28px' }}>
           {loading && <StatusBox>⏳ Lädt…</StatusBox>}
           {error   && <ErrorBox msg={error} />}
@@ -630,6 +638,7 @@ function MovieModal({ tmdbId, onClose, mobile }) {
             )}
           </>)}
         </div>
+        </div>{/* Ende scroll-wrapper */}
       </div>
     </div>
   );