Fix geosolutions-it#11794 Update the layout for the MapViewerLayout component (geosolutions-it#11931)

Author: subashtiwari1010

web/client/components/layout/MapViewerLayout.jsx

@@ -22,7 +22,7 @@ const MapViewerLayout = ({
         watch: ['bottom']
     });
     return (
-        <FlexBox id={id} className={className} column classNames={['_fill', '_absolute']}>
+        <FlexBox id={id} className={className} column classNames={['_fill', '_absolute', 'ms-map-viewer-layout']}>
             {header}
             <FlexFill flexBox column className={bodyClassName} classNames={['_relative', 'ms-map-viewer-layout-body']}>
                 <div className="_fill _absolute">{background}</div>

web/client/themes/default/less/common.less

@@ -149,11 +149,14 @@
     }
 }
 
-.ms-map-viewer-layout-body {
-    &:has(.ms-featuregrid-fill) {
-        .ms-map-viewer-layout-bottom,
-        .ms-featuregrid-fill {
-            height: 100%;
+.ms-map-viewer-layout {
+    .ms-map-viewer-layout-body {
+        z-index: 0;
+        &:has(.ms-featuregrid-fill) {
+            .ms-map-viewer-layout-bottom,
+            .ms-featuregrid-fill {
+                height: 100%;
+            }
         }
     }
 }