@centreon/ui 23.10.88 → 23.10.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.88",
+  "version": "23.10.90",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Item.tsx

@@ -6,7 +6,7 @@ import {
   ReactElement
 } from 'react';
 
-import { isNil } from 'ramda';
+import { isNil, prop } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
 
@@ -59,10 +59,13 @@ const Item = forwardRef(
     return useMemoComponent({
       Component: (
         <div
+          {...cardContainerListeners}
           className={className}
           ref={ref}
-          style={style}
-          {...cardContainerListeners}
+          style={{
+            ...style,
+            width: `calc(${prop('width', style) || '0px'} - 12px)`
+          }}
         >
           <Card className={classes.widgetContainer}>
             {header && (

package/src/Graph/SingleBar/ResponsiveSingleBar.tsx

@@ -110,7 +110,7 @@ const ResponsiveSingleBar = ({
     () =>
       scaleLinear<number>({
         domain: [0, adaptedMaxValue],
-        range: [0, width]
+        range: [0, width - 10 || 0]
       }),
     [width, adaptedMaxValue]
   );
@@ -150,7 +150,7 @@ const ResponsiveSingleBar = ({
               height={barHeights[size]}
               rx={4}
               style={springStyle}
-              x={0}
+              x={5}
               y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
             />
             <Bar
@@ -160,7 +160,7 @@ const ResponsiveSingleBar = ({
               ry={4}
               stroke={alpha(theme.palette.text.primary, 0.3)}
               width={maxBarWidth}
-              x={0}
+              x={5}
               y={groupMargin + (isSmall ? 0 : 2 * margins.top)}
             />
             {thresholds.enabled && (

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -26,7 +26,7 @@ const useStyles = makeStyles()((theme) => ({
     borderBottom: `1px solid ${theme.palette.header.page.border}`,
     display: 'flex',
     gap: theme.spacing(4),
-    paddingBottom: theme.spacing(2)
+    paddingBottom: theme.spacing(1.5)
   },
   pageHeaderActions: {
     '& > button': {

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -25,18 +25,17 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'min-content',
     overflow: 'hidden',
-    padding: theme.spacing(2, 3, 5)
+    padding: theme.spacing(1.5, 3, 5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {
       backgroundColor: theme.palette.layout.header.background,
       borderBottom: `1px solid ${theme.palette.layout.header.border}`,
-      padding: theme.spacing(5, 4, 2),
+      padding: theme.spacing(3, 4, 2),
       position: 'sticky',
       top: 0,
       zIndex: `calc(${theme.zIndex.mobileStepper} - 100)`
     },
-
-    padding: theme.spacing(5, 3, 0)
+    padding: theme.spacing(3, 3, 0)
   }
 }));