From f7fd7cf7d5f86821afc5b51a3bd526e1638f8ebc Mon Sep 17 00:00:00 2001
From: Yusuf Suleman <yusuf@quadjourney.com>
Date: Wed, 1 Apr 2026 19:18:34 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20brain=20viewer=20=E2=80=94=20centered=20?=
 =?UTF-8?q?popup=20modal=20instead=20of=20full-screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 90vw x 80vh centered modal with rounded corners and shadow
- Blurred backdrop overlay, click outside to close
- PDF viewer on left, metadata sidebar on right
- Feels like a popup, not a page takeover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/pages/brain/AtelierBrainPage.svelte   | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
index d0e401d..01bb3c1 100644
--- a/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
+++ b/frontend-v2/src/lib/pages/brain/AtelierBrainPage.svelte
@@ -446,7 +446,7 @@
 <!-- ═══ PDF/Image full-screen viewer ═══ -->
 {#if selectedItem && (selectedItem.type === 'pdf' || selectedItem.type === 'image')}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div class="viewer-overlay" onkeydown={(e) => { if (e.key === 'Escape') selectedItem = null; }}>
+  <div class="viewer-overlay" onclick={(e) => { if (e.target === e.currentTarget) selectedItem = null; }} onkeydown={(e) => { if (e.key === 'Escape') selectedItem = null; }}>
     <div class="viewer-layout">
       <!-- Main viewer area -->
       <div class="viewer-main">
@@ -905,26 +905,34 @@
   .empty-title { font-size: 1.2rem; font-weight: 700; color: #1e1812; margin-bottom: 6px; }
   .empty-desc { font-size: 0.95rem; color: #6a5d50; }
 
-  /* ═══ Full-screen document viewer ═══ */
+  /* ═══ Document viewer popup ═══ */
   .viewer-overlay {
     position: fixed; inset: 0; z-index: 60;
-    background: rgba(17,13,10,0.92);
+    background: rgba(17,13,10,0.5);
+    backdrop-filter: blur(6px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
     animation: fadeIn 200ms ease;
   }
   @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 
   .viewer-layout {
     display: grid;
-    grid-template-columns: 1fr 340px;
-    height: 100vh;
+    grid-template-columns: 1fr 300px;
+    width: 90vw;
+    max-width: 1100px;
+    height: 80vh;
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: 0 32px 80px rgba(18,13,10,0.3);
+    animation: sheetIn 220ms ease;
   }
 
   .viewer-main {
     overflow: auto;
-    background: #2a2420;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background: #f5f0ea;
   }
 
   .viewer-iframe {
@@ -939,26 +947,25 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    max-height: 100%;
+    height: 100%;
     overflow: auto;
   }
 
   .viewer-image {
     max-width: 100%;
-    max-height: 90vh;
+    max-height: 100%;
     object-fit: contain;
     border-radius: 8px;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
   }
 
   .viewer-sidebar {
     background: linear-gradient(180deg, #f8f1e8 0%, #f3eadc 100%);
     border-left: 1px solid rgba(35,26,17,0.08);
-    padding: 24px;
+    padding: 22px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 14px;
   }
 
   .viewer-sidebar-header {
@@ -1108,7 +1115,8 @@
     .signal-strip { grid-template-columns: 1fr 1fr; }
     .masonry { columns: 1; }
     .detail-sheet { width: 100%; padding: 20px; }
-    .viewer-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
+    .viewer-overlay { padding: 12px; }
+    .viewer-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; width: 100%; height: 90vh; border-radius: 18px; }
     .viewer-sidebar { max-height: 40vh; border-left: none; border-top: 1px solid rgba(35,26,17,0.08); }
   }
 </style>