fix

frontend/src/app/DocumentsRoute.tsx

@@ -55,7 +55,8 @@ const DocumentsRouteContent: React.FC = () => {
   }, []);
 
   const renderSurface = () => {
-    const layoutClass = `documents-main${sidebarHidden ? ' documents-main--sidebar-hidden' : ''}`;
+    const detailMode = surface?.detailMode ?? null;
+    const layoutClass = `documents-main${sidebarHidden ? ' documents-main--sidebar-hidden' : ''}${detailMode === 'overlay' ? ' documents-main--overlay-detail' : ''}`;
     const sidebarNode = !sidebarHidden && sidebarProps ? <Sidebar {...sidebarProps} /> : null;
     const surfaceDetail = surface && (surface as { detail?: ReactNode }).detail ? (surface as { detail?: ReactNode }).detail : null;
     const surfaceBody = surface ? surface.content : null;

frontend/src/app/useWorkspaceSurface.tsx

@@ -27,7 +27,7 @@ export type DetailPanelProps = (ComponentProps<typeof DocumentViewerPanel> & {
   ) => Promise<void>;
 }) | null;
 
-export type WorkspaceSurface = { content: ReactNode; detail?: ReactNode | null } | null;
+export type WorkspaceSurface = { content: ReactNode; detail?: ReactNode | null; detailMode?: 'overlay' | 'inline' | null } | null;
 
 export interface UseWorkspaceSurfaceArgs {
   sidebarHidden?: boolean;
@@ -100,7 +100,10 @@ export const useWorkspaceSurface = ({
     }
 
     const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
+    const viewMode = documentsTableProps.viewMode;
+    const sidebarMode = viewMode === 'desk' ? 'overlay' : 'inline';
 
+    const detailMode: 'overlay' | 'inline' | null = detailPanelOpen && detailPanelProps ? sidebarMode : null;
     const detail = detailPanelOpen && detailPanelProps
       ? (() => {
         const {
@@ -114,6 +117,7 @@ export const useWorkspaceSurface = ({
         const viewer = (
           <DocumentViewerPanel
             variant="sidebar"
+            sidebarMode={sidebarMode}
             onCollapsePanel={onClose}
             onMaximizePanel={onOpenPreview}
             tagOptions={tagOptions}
@@ -141,6 +145,7 @@ export const useWorkspaceSurface = ({
         />
       ),
       detail,
+      detailMode,
     };
   }, [
     documentsTableProps,
@@ -205,7 +210,7 @@ export const useWorkspaceSurface = ({
       )
       : viewer;
 
-    return { content, detail: null };
+    return { content, detail: null, detailMode: null };
   }, [
     showPreviewWorkspace,
     previewWorkspaceDocument,

frontend/src/preview/DocumentViewerPanel.tsx

@@ -58,6 +58,8 @@ interface AssetLike {
   [key: string]: unknown;
 }
 
+type SidebarMode = 'overlay' | 'inline';
+
 interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
   document: DocumentLike | null;
   ensureAssetUrl?: (docId: DocumentId, asset: AssetLike, options?: { force?: boolean }) => Promise<unknown>;
@@ -70,6 +72,7 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
   variant?: 'viewer' | 'sidebar';
   onCollapsePanel?: () => void;
   onMaximizePanel?: (args: { documentIds: Array<string> }) => void;
+  sidebarMode?: SidebarMode;
 }
 
 
@@ -138,6 +141,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
   variant = 'viewer',
   onCollapsePanel,
   onMaximizePanel,
+  sidebarMode = 'overlay',
 }) => {
   const navigate = useNavigate();
   const isSidebarVariant = variant === 'sidebar';
@@ -507,10 +511,11 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
   );
 
   if (isSidebarVariant) {
+    const sidebarClass = `detail-panel panel${sidebarMode === 'inline' ? ' detail-panel--inline' : ''}${isPanelResizing ? ' detail-panel--resizing' : ''}`;
     return (
       <>
         <aside
-          className={`detail-panel panel${isPanelResizing ? ' detail-panel--resizing' : ''}`}
+          className={sidebarClass}
           ref={panelRef}
           style={detailPanelStyle}
         >

frontend/src/styles/detail/detail-panels.css

@@ -16,6 +16,16 @@
   overflow: visible;
 }
 
+.detail-panel.detail-panel--inline {
+  position: relative;
+  right: auto;
+  top: auto;
+  height: auto;
+  min-height: 100%;
+  z-index: auto;
+  flex: 0 0 var(--detail-panel-width);
+}
+
 .detail-panel--resizing {
   cursor: col-resize;
   user-select: none;

frontend/src/styles/documents/listing.css

@@ -104,6 +104,11 @@
   overflow: visible;
 }
 
+.documents-main--overlay-detail .panel-floating-region {
+  width: calc(100% - var(--detail-panel-width) - 2rem);
+  margin-right: var(--detail-panel-width);
+}
+
 .panel-floating__buttons {
   display: inline-flex;
   align-items: center;

frontend/src/styles/layout/structure.css

@@ -57,7 +57,7 @@
   color: var(--muted-subtle);
 }
 
-.main-content .panel-header {
+.documents-main--overlay-detail .main-content .panel-header {
   margin-right: var(--detail-panel-width);
 }