CSV viewer responsive (#1963)

* CSV viewer responsive

* remove title and description

Author: dsuren1

geonode_mapstore_client/client/js/components/MediaViewer/SpreadsheetViewer.jsx

@@ -34,7 +34,7 @@ const VirtualizedGrid = ({data}) => {
     );
 };
 
-export const SpreadsheetViewer = ({extension, title, description, src, url}) => {
+export const SpreadsheetViewer = ({extension, src, url}) => {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -89,8 +89,6 @@ export const SpreadsheetViewer = ({extension, title, description, src, url}) =>
     return data?.length > 0 ? (
         <div className="gn-csv-viewer">
             <div className="csv-container">
-                <span className="title">{title}</span>
-                <span className="description">{description}</span>
                 <VirtualizedGrid data={data}/>
             </div>
         </div>

geonode_mapstore_client/client/themes/geonode/less/_media-viewer.less

@@ -67,24 +67,22 @@
         width: 50vw;
     }
     .gn-csv-viewer {
-        padding: 0 20em;
         height: 100%;
         .csv-container {
+            width: 100%;
+            max-width: 1024px;
+            margin: auto;
+            overflow-y: auto;
             padding: 1.5em;
             padding-bottom: 0;
             display: flex;
             flex-direction: column;
             gap: 12px;
             overflow-wrap: break-word;
             height: 100%;
-            .title {
-                margin: 0;
-                font-weight: 500;
-                font-size: 1.5em;
-            }
             .grid-container {
                 height: 100%;
-                min-height: 350px;
+                min-height: 320px;
                 .empty-data {
                     display: flex;
                     justify-content: center;
@@ -99,13 +97,6 @@
             -ms-user-select: text;
             user-select: text;
         }
-        @media screen and (max-width: 768px) {
-            padding: 0;
-            overflow-y: auto;
-            .csv-container {
-                height: auto;
-            }
-        }
     }
 }