detailspanel, selection handling, single document details panel

frontend/src/preview/DocumentViewerPanel.jsx

@@ -185,9 +185,11 @@ const DocumentViewerPanel = ({
   if (!document) {
     return (
       <section className="document-viewer document-viewer--loading">
-        <div className="document-viewer__details">
-          <div className="document-viewer__message">
-            Loading document{documentId ? ` ${documentId}` : ''}…
+        <div className="document-viewer__details-pane">
+          <div className="document-viewer__details">
+            <div className="document-viewer__message">
+              Loading document{documentId ? ` ${documentId}` : ''}…
+            </div>
           </div>
         </div>
         <div className="document-viewer__viewport">
@@ -199,17 +201,19 @@ const DocumentViewerPanel = ({
 
   return (
     <section className="document-viewer">
-      <div className="document-viewer__details">
-        <DocumentInfoPanel
-          document={document}
-          summaryProps={summaryProps}
-          metadataPayload={metadataPayload}
-          contentConfig={contentTabConfig}
-          defaultTabId="details"
-          classNamePrefix="document-viewer"
-          hideTabNavWhenSingle={false}
-          resetKey={document?.id}
-        />
+      <div className="document-viewer__details-pane">
+        <div className="document-viewer__details">
+          <DocumentInfoPanel
+            document={document}
+            summaryProps={summaryProps}
+            metadataPayload={metadataPayload}
+            contentConfig={contentTabConfig}
+            defaultTabId="details"
+            classNamePrefix="document-viewer"
+            hideTabNavWhenSingle={false}
+            resetKey={document?.id}
+          />
+        </div>
       </div>
       <div className="document-viewer__viewport">
         {!previewEntry?.url ? (