Fix - Actionbar menus are hidden behind the document viewer (#2048)

Author: dsuren1

geonode_mapstore_client/client/js/components/MediaViewer/__tests__/Media-test.jsx

@@ -41,7 +41,7 @@ describe('Test Media', () => {
         ReactDOM.render( <Media resource={{href: "http://example.com", thumbnail_url: 'image', resource_type: "document", extension: "docx", "abstract": "test", pk: 1, perms: [
             "download_resourcebase"
         ] }}/>, document.getElementById("container"));
-        const mediaViewer = document.querySelector('.gn-main-event-container');
+        const mediaViewer = document.querySelector('.gn-metadata-preview');
         expect(mediaViewer).toBeTruthy();
     });
 

geonode_mapstore_client/client/js/components/MetadataPreview/MetadataPreview.jsx

@@ -7,12 +7,13 @@
 */
 
 import React from 'react';
+import FlexBox from '@mapstore/framework/components/layout/FlexBox';
 
 function MetadataPreview({
     url
 }) {
     return (
-        <div className="gn-main-event-container">
+        <FlexBox column centerChildren classNames={['gn-metadata-preview', '_corner-tl', '_absolute', '_fill']}>
             <iframe
                 frameBorder="0"
                 key={url}
@@ -21,7 +22,7 @@ function MetadataPreview({
                     width: '100%',
                     height: '100%'
                 }} />
-        </div>
+        </FlexBox>
     );
 }
 

geonode_mapstore_client/client/themes/geonode/less/_action-navbar.less

@@ -6,7 +6,7 @@
 .ms-action-navbar {
     .dropdown {
         .dropdown-menu {
-            button, li button {
+            button, li button, a {
                 padding: 3px 20px;
                 text-align: left;
                 width: 100%;

geonode_mapstore_client/client/themes/geonode/less/_footer.less

@@ -58,3 +58,12 @@
         padding: 0 0.5rem;
     }
 }
+
+.gn-footer-placeholder {
+    display: block;
+}
+.gn-catalogue:has(.page-viewer) {
+    .gn-footer-placeholder {
+        display: none;
+    }
+}