fix(time-slider): update left and right panel width #1494

Canadian-Geospatial-Platform · Nov 16, 2023 · 2fcaaff · 2fcaaff
1 parent a50f521
commit 2fcaaff
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/packages/geoview-core/src/core/components/common/layer-list-style.ts b/packages/geoview-core/src/core/components/common/layer-list-style.ts
@@ -7,7 +7,7 @@ export const getSxClasses = (theme: Theme) => ({
     [theme.breakpoints.up('md')]: {
       paddingRight: '1rem',
     },
-    [theme.breakpoints.up('lg')]: {
+    [theme.breakpoints.up('xl')]: {
       paddingRight: '2rem',
     },
     '& .MuiListItemText-primary': {

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
@@ -153,13 +153,15 @@ export function Datapanel({ layerData, mapId, projectionConfig, language }: Data
         <ResponsiveGrid.Left
           isLayersPanelVisible={isLayersPanelVisible}
           xs={isLayersPanelVisible ? 12 : 0}
-          md={!isEnlargeDataTable ? 4 : 1.25}
+          md={!isEnlargeDataTable ? 4 : 2}
+          lg={!isEnlargeDataTable ? 4 : 1.25}
         >
           {renderList()}
         </ResponsiveGrid.Left>
         <ResponsiveGrid.Right
           xs={!isLayersPanelVisible ? 12 : 0}
-          md={!isEnlargeDataTable ? 8 : 10.75}
+          md={!isEnlargeDataTable ? 8 : 10}
+          lg={!isEnlargeDataTable ? 8 : 10.75}
           isLayersPanelVisible={isLayersPanelVisible}
           sxProps={{ minHeight: '250px' }}
         >

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -221,13 +221,15 @@ export function Detailspanel({ mapId }: DetailsPanelProps): JSX.Element {
             <ResponsiveGrid.Left
               isLayersPanelVisible={isLayersPanelVisible}
               xs={isLayersPanelVisible ? 12 : 0}
-              md={!isEnlargeDataTable ? 4 : 1.25}
+              md={!isEnlargeDataTable ? 4 : 2}
+              lg={!isEnlargeDataTable ? 4 : 1.25}
             >
               {renderLayerList()}
             </ResponsiveGrid.Left>
             <ResponsiveGrid.Right
               xs={!isLayersPanelVisible ? 12 : 0}
-              md={!isEnlargeDataTable ? 8 : 10.75}
+              md={!isEnlargeDataTable ? 8 : 10}
+              lg={!isEnlargeDataTable ? 8 : 10.75}
               isLayersPanelVisible={isLayersPanelVisible}
             >
               <Box sx={sxClasses.rightPanleContainer}>

diff --git a/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx b/packages/geoview-core/src/core/components/time-slider/time-slider-panel.tsx
@@ -81,13 +81,15 @@ export function TimeSliderPanel(props: TypeTimeSliderProps): JSX.Element {
         <ResponsiveGrid.Left
           isLayersPanelVisible={isLayersPanelVisible}
           xs={isLayersPanelVisible ? 12 : 0}
-          md={!isEnlargeDataTable ? 4 : 1.25}
+          md={!isEnlargeDataTable ? 4 : 2}
+          lg={!isEnlargeDataTable ? 4 : 1.25}
         >
           {renderLayerList()}
         </ResponsiveGrid.Left>
         <ResponsiveGrid.Right
           xs={!isLayersPanelVisible ? 12 : 0}
-          md={!isEnlargeDataTable ? 8 : 10.75}
+          md={!isEnlargeDataTable ? 8 : 10}
+          lg={!isEnlargeDataTable ? 8 : 10.75}
           isLayersPanelVisible={isLayersPanelVisible}
         >
           <TimeSlider mapId={mapId} layerPath={selectedLayer} sliderFilterProps={timeSliderData[selectedLayer]} key={selectedLayer} />