fix(datatable): responsive datatable Closes #1462

Canadian-Geospatial-Platform · Nov 8, 2023 · ab89f1e · ab89f1e
1 parent d8f0dc6
commit ab89f1e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx
@@ -194,7 +194,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
           <Button
             type="text"
             size="small"
-            sx={{ ...sxClasses.enlargeBtn, [theme.breakpoints.down('sm')]: { display: 'none' } }}
+            sx={{ ...sxClasses.enlargeBtn, [theme.breakpoints.down('md')]: { display: 'none' } }}
             onClick={() => setIsEnlargeDataTable(!isEnlargeDataTable)}
           >
             {isEnlargeDataTable ? <ArrowForwardIcon sx={sxClasses.enlargeBtnIcon} /> : <ArrowBackIcon sx={sxClasses.enlargeBtnIcon} />}
@@ -240,7 +240,7 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
 
           {!isLoading &&
             layerData.map(({ layerKey, layerId }, index) => (
-              <Box key={layerKey} sx={{ [theme.breakpoints.up('sm')]: { paddingLeft: '3.5rem' } }}>
+              <Box key={layerKey} sx={{ [theme.breakpoints.up('lg')]: { paddingLeft: '3.5rem' } }}>
                 {index === selectedLayerIndex ? (
                   <Box>
                     {layerData[index].features.length ? (

diff --git a/packages/geoview-core/src/core/components/data-table/data-table-grid.tsx b/packages/geoview-core/src/core/components/data-table/data-table-grid.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { Grid } from '@/ui';
 import { GridProps, useTheme } from '@mui/material';
+import { Grid } from '@/ui';
 
 interface DataTableGridProps extends GridProps {
   children: ReactNode;

diff --git a/packages/geoview-core/src/core/components/layers/layers-style.ts b/packages/geoview-core/src/core/components/layers/layers-style.ts
@@ -141,6 +141,6 @@ export const getSxClasses = (theme: Theme) => ({
       fontSize: 16,
       noWrap: true,
       marginLeft: 20,
-    }
-  }
+    },
+  },
 });