From f0fb15e6811a8dc1540c066215305bad867b82d9 Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Tue, 30 Jun 2026 10:26:25 +0200
Subject: [PATCH 01/11] Migrate Grid to Grid2

---
 src/components/App/App.tsx                     |  8 ++++----
 src/components/App/HomePage.tsx                |  9 +++++++--
 src/components/Grid/GridTable.tsx              |  6 +++---
 .../announcements/add-announcement-form.tsx    | 14 +++++++-------
 src/pages/announcements/announcements-page.tsx | 18 +++++++++---------
 src/pages/common/multi-chip-cell-renderer.tsx  |  2 +-
 src/pages/common/table-selection.tsx           | 16 +++++++---------
 src/pages/groups/groups-page.tsx               |  6 +++---
 .../modification/group-modification-form.tsx   |  8 ++++----
 .../modification/configuration-selection.tsx   |  8 ++++----
 .../modification/profile-modification-form.tsx | 18 +++++++++---------
 src/pages/profiles/profiles-page.tsx           |  6 +++---
 src/pages/profiles/validity-cell-renderer.tsx  | 16 ++++++++--------
 .../modification/user-modification-form.tsx    | 12 ++++++------
 src/pages/users/users-page.tsx                 |  6 +++---
 15 files changed, 78 insertions(+), 75 deletions(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 401fae27..6742a902 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import {
     AnnouncementNotification,
     AuthenticationRouter,
@@ -148,13 +148,13 @@ export default function App() {
             alignItems="stretch"
             sx={{ height: '100vh', width: '100vw' }}
         >
-            <Grid item xs="auto">
+            <Grid size="auto">
                 <AppTopBar userManagerInstance={userManager.instance} />
             </Grid>
-            <Grid item xs="auto">
+            <Grid size="auto">
                 <AnnouncementNotification userProfile={userProfile} />
             </Grid>
-            <Grid item container xs component="main" height={'100%'}>
+            <Grid component="main" container sx={{ flexGrow: 1, height: '100%', width: '100%' }}>
                 <CardErrorBoundary>
                     <div
                         className="singlestretch-parent"
diff --git a/src/components/App/HomePage.tsx b/src/components/App/HomePage.tsx
index aad5279b..247d6fd3 100644
--- a/src/components/App/HomePage.tsx
+++ b/src/components/App/HomePage.tsx
@@ -5,13 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Typography } from '@mui/material';
+import { Grid2 as Grid, Typography } from '@mui/material';
 import { ReactElement } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export default function HomePage(): ReactElement {
     return (
-        <Grid item id="home-page" xs={12} alignSelf="center" component="section">
+        <Grid
+            id="home-page"
+            size={12}
+            alignSelf="center"
+            component="section"
+        >
             <Typography variant="h3" color="textPrimary" align="center">
                 <FormattedMessage id="connected" />
             </Typography>
diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx
index 804052a9..ee1a32f6 100644
--- a/src/components/Grid/GridTable.tsx
+++ b/src/components/Grid/GridTable.tsx
@@ -18,7 +18,7 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { AppBar, Box, Button, ButtonProps, Grid, Toolbar } from '@mui/material';
+import { AppBar, Box, Button, ButtonProps, Grid2 as Grid, Toolbar } from '@mui/material';
 import { Delete } from '@mui/icons-material';
 import { AgGrid, AgGridRef } from './AgGrid';
 import { GridOptions } from 'ag-grid-community';
@@ -75,7 +75,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
 
     return (
         <Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
-            <Grid item xs="auto">
+            <Grid size="auto">
                 <AppBar position="static" color="default">
                     <Toolbar
                         variant="dense"
@@ -97,7 +97,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                     </Toolbar>
                 </AppBar>
             </Grid>
-            <Grid item xs>
+            <Grid sx={{ flexGrow: 1 }}>
                 <AgGrid<TData, TContext & GridTableExposed>
                     {...agGridProps}
                     ref={gridRef}
diff --git a/src/pages/announcements/add-announcement-form.tsx b/src/pages/announcements/add-announcement-form.tsx
index 4b1091a0..cb150ee2 100644
--- a/src/pages/announcements/add-announcement-form.tsx
+++ b/src/pages/announcements/add-announcement-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { type DateOrTimeView } from '@mui/x-date-pickers';
 import { useIntl } from 'react-intl';
 import * as yup from 'yup';
@@ -136,8 +136,8 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
         >
             <FormErrorProvider onError={onErrorIntl}>
                 <Grid container direction="column" spacing={1} height="100%">
-                    <Grid item container xs="auto" spacing={1}>
-                        <Grid item xs={12} lg={6}>
+                    <Grid container spacing={1}>
+                        <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>
                                 name={START_DATE}
                                 label={intl.formatMessage({ id: 'announcements.table.startDate' })}
@@ -148,7 +148,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                                 disablePast
                             />
                         </Grid>
-                        <Grid item xs={12} lg={6}>
+                        <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>
                                 name={END_DATE}
                                 label={intl.formatMessage({ id: 'announcements.table.endDate' })}
@@ -161,7 +161,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             />
                         </Grid>
                     </Grid>
-                    <Grid item xs="auto">
+                    <Grid size="auto">
                         <SelectElement<FormSchema>
                             name={SEVERITY}
                             label={intl.formatMessage({ id: 'announcements.severity' })}
@@ -176,7 +176,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             fullWidth
                         />
                     </Grid>
-                    <Grid item xs>
+                    <Grid sx={{ flexGrow: 1 }}>
                         <TextareaAutosizeElement<FormSchema>
                             name={MESSAGE}
                             label={intl.formatMessage({ id: 'announcements.form.message' })}
@@ -185,7 +185,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             //inputProps={{ maxLength: MESSAGE_MAX_LENGTH } satisfies Partial<HTMLInputElement>}
                         />
                     </Grid>
-                    <Grid item xs="auto">
+                    <Grid size="auto">
                         <SubmitButton variant="outlined" type="submit" fullWidth />
                     </Grid>
                 </Grid>
diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
index b18d89ff..c87e121f 100644
--- a/src/pages/announcements/announcements-page.tsx
+++ b/src/pages/announcements/announcements-page.tsx
@@ -8,7 +8,7 @@
 import type { UUID } from 'node:crypto';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Divider, Grid, Typography } from '@mui/material';
+import { Divider, Grid2 as Grid, Typography } from '@mui/material';
 import { snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
 import type { ColDef, GetRowIdParams, ValueFormatterFunc } from 'ag-grid-community';
 import { type GridTableRef } from '../../components/Grid';
@@ -121,27 +121,27 @@ export default function AnnouncementsPage() {
 
     // Note: using <Stack/> for the columns didn't work
     return (
-        <Grid container spacing={2} p={1} height={'100%'}>
-            <Grid item container direction="column" xs={12} sm={6} md={4}>
-                <Grid item xs="auto">
+        <Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
+            <Grid container direction="column" size={{ xs: 12, sm: 6, md: 4 }}>
+                <Grid size="auto">
                     <Typography variant="subtitle1">
                         <FormattedMessage id="announcements.programNewMessage" />
                     </Typography>
                 </Grid>
-                <Grid item xs="auto">
+                <Grid size="auto">
                     <Divider sx={{ mt: 0.5, mb: 1.5 }} />
                 </Grid>
-                <Grid item xs>
+                <Grid sx={{ flexGrow: 1 }}>
                     <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
                 </Grid>
             </Grid>
-            <Grid item container direction="column" xs={12} sm={6} md={8}>
-                <Grid item xs="auto">
+            <Grid container direction="column" size={{ xs: 12, sm: 6, md: 8 }}>
+                <Grid size="auto">
                     <Typography variant="subtitle1" mb={0.5}>
                         <FormattedMessage id="announcements.programmedMessage" />
                     </Typography>
                 </Grid>
-                <Grid item xs>
+                <Grid sx={{ flexGrow: 1 }}>
                     <AgGrid<Announcement>
                         ref={gridRef}
                         rowData={data}
diff --git a/src/pages/common/multi-chip-cell-renderer.tsx b/src/pages/common/multi-chip-cell-renderer.tsx
index 3da66ede..0e1e963a 100644
--- a/src/pages/common/multi-chip-cell-renderer.tsx
+++ b/src/pages/common/multi-chip-cell-renderer.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react';
-import { Chip, Grid, Tooltip } from '@mui/material';
+import { Chip, Grid2 as Grid, Tooltip } from '@mui/material';
 import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const maxChipWidth = 100;
diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx
index ef7bc3f2..1c33b70b 100644
--- a/src/pages/common/table-selection.tsx
+++ b/src/pages/common/table-selection.tsx
@@ -8,7 +8,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
-import { Grid, Typography } from '@mui/material';
+import { Grid2 as Grid, Typography } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
 import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
 import { defaultColDef, defaultRowSelection } from './table-config';
@@ -96,14 +96,12 @@ function TableSelection<TData>({
     }, [columnDefs]);
 
     return (
-        <Grid item container direction="column" style={{ height: '100%' }}>
-            <Grid item>
-                <Typography variant="subtitle1">
-                    <FormattedMessage id={titleId} />
-                    {` (${selectedCount} / ${items.length})`}
-                </Typography>
-            </Grid>
-            <Grid item xs>
+        <Grid container direction="column" sx={{ height: '100%', width: '100%' }}>
+            <Typography variant="subtitle1">
+                <FormattedMessage id={titleId} />
+                {` (${selectedCount} / ${items.length})`}
+            </Typography>
+            <Grid sx={{ flexGrow: 1 }}>
                 <CustomAGGrid
                     gridId="table-selection"
                     ref={gridRef}
diff --git a/src/pages/groups/groups-page.tsx b/src/pages/groups/groups-page.tsx
index 99beabca..686e9c77 100644
--- a/src/pages/groups/groups-page.tsx
+++ b/src/pages/groups/groups-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { GroupInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,8 +41,8 @@ const GroupsPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} component="section" height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Grid container direction="column" spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <GroupsTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}
diff --git a/src/pages/groups/modification/group-modification-form.tsx b/src/pages/groups/modification/group-modification-form.tsx
index 97c02a98..838c9e9c 100644
--- a/src/pages/groups/modification/group-modification-form.tsx
+++ b/src/pages/groups/modification/group-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useMemo, type FunctionComponent } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import * as yup from 'yup';
 import { TextInput } from '@gridsuite/commons-ui';
 import TableSelection from '../../common/table-selection';
@@ -60,11 +60,11 @@ const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({
     );
 
     return (
-        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={0} sx={{ height: '100%', width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput name={GROUP_NAME} label={'groups.table.id'} clearable={true} />
             </Grid>
-            <Grid item xs={12} style={{ height: '90%' }}>
+            <Grid sx={{ height: '90%', width: '100%' }}>
                 <TableSelection<UserSelectionItem>
                     titleId="groups.table.users"
                     items={usersOptions}
diff --git a/src/pages/profiles/modification/configuration-selection.tsx b/src/pages/profiles/modification/configuration-selection.tsx
index 9c4d5e9d..5e2d662b 100644
--- a/src/pages/profiles/modification/configuration-selection.tsx
+++ b/src/pages/profiles/modification/configuration-selection.tsx
@@ -8,7 +8,7 @@
 import { FunctionComponent, useEffect, useState } from 'react';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import FolderIcon from '@mui/icons-material/Folder';
-import { Grid, IconButton, Tooltip } from '@mui/material';
+import { Grid2 as Grid, IconButton, Tooltip } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { DirectoryItemSelector, ElementAttributes, ElementType, TreeViewFinderNodeProps } from '@gridsuite/commons-ui';
 import { useController, useWatch } from 'react-hook-form';
@@ -100,7 +100,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
 
     return (
         <Grid container columns={24} alignItems={'center'}>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <IconButton edge="start" onClick={handleResetConfig} disableRipple={watchConfigId === undefined}>
                     <Tooltip
                         title={intl.formatMessage({
@@ -111,7 +111,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
                     </Tooltip>
                 </IconButton>
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <IconButton edge="start" onClick={handleSelectFolder}>
                     <Tooltip
                         title={intl.formatMessage({
@@ -122,7 +122,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
                     </Tooltip>
                 </IconButton>
             </Grid>
-            <Grid item xs={22}>
+            <Grid size={22}>
                 <LinkedPathDisplay
                     nameKey={getConfigTranslationKey()}
                     value={selectedElementName}
diff --git a/src/pages/profiles/modification/profile-modification-form.tsx b/src/pages/profiles/modification/profile-modification-form.tsx
index 3084fc1c..e63db107 100644
--- a/src/pages/profiles/modification/profile-modification-form.tsx
+++ b/src/pages/profiles/modification/profile-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { ElementType, IntegerInput, TextInput } from '@gridsuite/commons-ui';
-import Grid from '@mui/material/Grid';
+import { Grid2 as Grid } from '@mui/material';
 import ConfigurationSelection, { ConfigSelectionProps } from './configuration-selection';
 import { FormattedMessage } from 'react-intl';
 import React, { FunctionComponent } from 'react';
@@ -42,18 +42,18 @@ const configList: ConfigSelectionProps[] = [
 
 const ProfileModificationForm: FunctionComponent = () => {
     return (
-        <Grid container spacing={2} marginTop={'auto'}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={'auto'} sx={{ width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput name={PROFILE_NAME} label={'profiles.table.id'} clearable={true} />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <h3>
                     <FormattedMessage id={'profiles.form.modification.defaultConfigurations'} />
                 </h3>
             </Grid>
             {configList.map((config) => {
                 return (
-                    <Grid item xs={12} key={config.selectionFormId}>
+                    <Grid key={config.selectionFormId} sx={{ width: '100%' }}>
                         <ConfigurationSelection
                             elementType={config.elementType}
                             selectionFormId={config.selectionFormId}
@@ -61,20 +61,20 @@ const ProfileModificationForm: FunctionComponent = () => {
                     </Grid>
                 );
             })}
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <h3>
                     <FormattedMessage id={'profiles.form.modification.userQuotas'} />
                 </h3>
             </Grid>
-            <Grid container spacing={2} direction="row" marginLeft={'auto'}>
-                <Grid item xs={4}>
+            <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid size={4}>
                     <IntegerInput
                         name={USER_QUOTA_CASE_NB}
                         label="profiles.form.modification.numberOfCasesOrStudies"
                         clearable={true}
                     />
                 </Grid>
-                <Grid item xs={4}>
+                <Grid size={4}>
                     <IntegerInput
                         name={USER_QUOTA_BUILD_NB}
                         label="profiles.form.modification.numberOfNodeBuilds"
diff --git a/src/pages/profiles/profiles-page.tsx b/src/pages/profiles/profiles-page.tsx
index 68e393f5..543ffcdc 100644
--- a/src/pages/profiles/profiles-page.tsx
+++ b/src/pages/profiles/profiles-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserProfile } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -42,8 +42,8 @@ const ProfilesPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} component="section" height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Grid container direction="column" spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <ProfilesTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}
diff --git a/src/pages/profiles/validity-cell-renderer.tsx b/src/pages/profiles/validity-cell-renderer.tsx
index da041028..31ee9494 100644
--- a/src/pages/profiles/validity-cell-renderer.tsx
+++ b/src/pages/profiles/validity-cell-renderer.tsx
@@ -5,18 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid } from '@mui/material';
 import { Cancel, CheckCircle, RadioButtonUnchecked } from '@mui/icons-material';
 import { ICellRendererParams } from 'ag-grid-community';
 
 export const ValidityCellRenderer = (props: ICellRendererParams) => {
-    return (
-        <Grid container>
-            {props.value == null && <RadioButtonUnchecked fontSize="small" />}
-            {props.value === true && <CheckCircle fontSize="small" color="success" />}
-            {props.value === false && <Cancel fontSize="small" color="error" />}
-        </Grid>
-    );
+    if (props.value == null) {
+        return <RadioButtonUnchecked fontSize="small" />;
+    }
+    if (props.value === true) {
+        return <CheckCircle fontSize="small" color="success" />;
+    }
+
+    return <Cancel fontSize="small" color="error" />;
 };
 
 export default ValidityCellRenderer;
diff --git a/src/pages/users/modification/user-modification-form.tsx b/src/pages/users/modification/user-modification-form.tsx
index 08ab5dbf..1ce8a1dc 100644
--- a/src/pages/users/modification/user-modification-form.tsx
+++ b/src/pages/users/modification/user-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useMemo, type FunctionComponent } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import * as yup from 'yup';
 import { AutocompleteInput, TextInput } from '@gridsuite/commons-ui';
 import TableSelection from '../../common/table-selection';
@@ -60,8 +60,8 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
     );
 
     return (
-        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={0} sx={{ height: '100%', width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_NAME}
                     label={'users.table.id'}
@@ -69,7 +69,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     formProps={{ disabled: true, style: { fontStyle: 'italic' } }}
                 />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_FULL_NAME}
                     label={'users.table.fullName'}
@@ -77,7 +77,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     formProps={{ disabled: true, style: { fontStyle: 'italic' } }}
                 />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <AutocompleteInput
                     name={USER_PROFILE_NAME}
                     label={'users.table.profileName'}
@@ -89,7 +89,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     options={profileOptions}
                 />
             </Grid>
-            <Grid item xs={12} style={{ height: '85%' }}>
+            <Grid sx={{ height: '85%', width: '100%' }}>
                 <TableSelection<GroupSelectionItem>
                     titleId="users.table.groups"
                     items={groupOptions}
diff --git a/src/pages/users/users-page.tsx b/src/pages/users/users-page.tsx
index 1fbc9d58..572ee5ee 100644
--- a/src/pages/users/users-page.tsx
+++ b/src/pages/users/users-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,8 +41,8 @@ const UsersPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Grid container direction="column" spacing={2} sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <UsersTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}

From fe8240e2ef216e4940ae12dd02d0b6582a84ce5d Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Tue, 30 Jun 2026 10:41:11 +0200
Subject: [PATCH 02/11] Migrate Grid to Grid2

---
 src/components/App/App.tsx      | 25 +++++++------------------
 src/components/App/HomePage.tsx |  7 +------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 6742a902..151a057b 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Grid2 as Grid } from '@mui/material';
+import { Box } from '@mui/material';
 import {
     AnnouncementNotification,
     AuthenticationRouter,
@@ -140,21 +140,10 @@ export default function App() {
     }, [initialMatchSilentRenewCallbackUrl, dispatch, initialMatchSigninCallbackUrl]);
 
     return (
-        <Grid
-            container
-            direction="column"
-            spacing={0}
-            justifyContent="flex-start"
-            alignItems="stretch"
-            sx={{ height: '100vh', width: '100vw' }}
-        >
-            <Grid size="auto">
-                <AppTopBar userManagerInstance={userManager.instance} />
-            </Grid>
-            <Grid size="auto">
-                <AnnouncementNotification userProfile={userProfile} />
-            </Grid>
-            <Grid component="main" container sx={{ flexGrow: 1, height: '100%', width: '100%' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw' }}>
+            <AppTopBar userManagerInstance={userManager.instance} />
+            <AnnouncementNotification userProfile={userProfile} />
+            <Box component="main" sx={{ display: 'flex', flexGrow: 1, minHeight: 0, width: '100%' }}>
                 <CardErrorBoundary>
                     <div
                         className="singlestretch-parent"
@@ -195,7 +184,7 @@ export default function App() {
                         )}
                     </div>
                 </CardErrorBoundary>
-            </Grid>
-        </Grid>
+            </Box>
+        </Box>
     );
 }
diff --git a/src/components/App/HomePage.tsx b/src/components/App/HomePage.tsx
index 247d6fd3..66ee3d9d 100644
--- a/src/components/App/HomePage.tsx
+++ b/src/components/App/HomePage.tsx
@@ -11,12 +11,7 @@ import { FormattedMessage } from 'react-intl';
 
 export default function HomePage(): ReactElement {
     return (
-        <Grid
-            id="home-page"
-            size={12}
-            alignSelf="center"
-            component="section"
-        >
+        <Grid id="home-page" size={12} alignSelf="center" component="section">
             <Typography variant="h3" color="textPrimary" align="center">
                 <FormattedMessage id="connected" />
             </Typography>

From 94301c27035f88c4e4dc41a1b9e26352ed5bdd1d Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Tue, 30 Jun 2026 17:09:37 +0200
Subject: [PATCH 03/11] Migrate Grid container direction="column" to Stack

---
 src/components/Grid/GridTable.tsx             | 50 +++++++++----------
 .../announcements/add-announcement-form.tsx   | 42 +++++++---------
 .../announcements/announcements-page.tsx      | 49 +++++++++---------
 src/pages/common/table-selection.tsx          | 10 ++--
 src/pages/groups/groups-page.tsx              |  6 +--
 src/pages/profiles/profiles-page.tsx          |  6 +--
 src/pages/users/users-page.tsx                |  6 +--
 7 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx
index ee1a32f6..b02d806a 100644
--- a/src/components/Grid/GridTable.tsx
+++ b/src/components/Grid/GridTable.tsx
@@ -18,7 +18,7 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { AppBar, Box, Button, ButtonProps, Grid2 as Grid, Toolbar } from '@mui/material';
+import { AppBar, Box, Button, ButtonProps, Stack, Toolbar } from '@mui/material';
 import { Delete } from '@mui/icons-material';
 import { AgGrid, AgGridRef } from './AgGrid';
 import { GridOptions } from 'ag-grid-community';
@@ -74,30 +74,28 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     );
 
     return (
-        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
-            <Grid size="auto">
-                <AppBar position="static" color="default">
-                    <Toolbar
-                        variant="dense"
-                        disableGutters
-                        sx={(theme) => ({
-                            marginLeft: 1,
-                            '& > *': {
-                                // mui's button set it own margin on itself...
-                                marginRight: `${theme.spacing(1)} !important`,
-                                '&:last-child': {
-                                    marginRight: '0 !important',
-                                },
+        <Stack justifyContent="flex-start" alignItems="stretch" width={'100%'}>
+            <AppBar position="static" color="default">
+                <Toolbar
+                    variant="dense"
+                    disableGutters
+                    sx={(theme) => ({
+                        marginLeft: 1,
+                        '& > *': {
+                            // mui's button set it own margin on itself...
+                            marginRight: `${theme.spacing(1)} !important`,
+                            '&:last-child': {
+                                marginRight: '0 !important',
                             },
-                        })}
-                    >
-                        {toolbarContent}
-                        <Box sx={{ flexGrow: 1 }} />
-                        {alignedRightToolbarContent}
-                    </Toolbar>
-                </AppBar>
-            </Grid>
-            <Grid sx={{ flexGrow: 1 }}>
+                        },
+                    })}
+                >
+                    {toolbarContent}
+                    <Box sx={{ flexGrow: 1 }} />
+                    {alignedRightToolbarContent}
+                </Toolbar>
+            </AppBar>
+            <Box sx={{ flexGrow: 1 }}>
                 <AgGrid<TData, TContext & GridTableExposed>
                     {...agGridProps}
                     ref={gridRef}
@@ -114,8 +112,8 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                         [context, loadDataAndSave]
                     )}
                 />
-            </Grid>
-        </Grid>
+            </Box>
+        </Stack>
     );
 });
 export default GridTable;
diff --git a/src/pages/announcements/add-announcement-form.tsx b/src/pages/announcements/add-announcement-form.tsx
index cb150ee2..4dd876a5 100644
--- a/src/pages/announcements/add-announcement-form.tsx
+++ b/src/pages/announcements/add-announcement-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { Grid2 as Grid } from '@mui/material';
+import { Box, Grid2 as Grid, Stack } from '@mui/material';
 import { type DateOrTimeView } from '@mui/x-date-pickers';
 import { useIntl } from 'react-intl';
 import * as yup from 'yup';
@@ -135,7 +135,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
             FormProps={{ style: { height: '100%' } }}
         >
             <FormErrorProvider onError={onErrorIntl}>
-                <Grid container direction="column" spacing={1} height="100%">
+                <Stack spacing={1} height="100%">
                     <Grid container spacing={1}>
                         <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>
@@ -161,22 +161,20 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             />
                         </Grid>
                     </Grid>
-                    <Grid size="auto">
-                        <SelectElement<FormSchema>
-                            name={SEVERITY}
-                            label={intl.formatMessage({ id: 'announcements.severity' })}
-                            options={useMemo(
-                                () =>
-                                    Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
-                                        id: value,
-                                        label: intl.formatMessage({ id: `announcements.severity.${value}` }),
-                                    })),
-                                [intl]
-                            )}
-                            fullWidth
-                        />
-                    </Grid>
-                    <Grid sx={{ flexGrow: 1 }}>
+                    <SelectElement<FormSchema>
+                        name={SEVERITY}
+                        label={intl.formatMessage({ id: 'announcements.severity' })}
+                        options={useMemo(
+                            () =>
+                                Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
+                                    id: value,
+                                    label: intl.formatMessage({ id: `announcements.severity.${value}` }),
+                                })),
+                            [intl]
+                        )}
+                        fullWidth
+                    />
+                    <Box sx={{ flexGrow: 1 }}>
                         <TextareaAutosizeElement<FormSchema>
                             name={MESSAGE}
                             label={intl.formatMessage({ id: 'announcements.form.message' })}
@@ -184,11 +182,9 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             fullWidth
                             //inputProps={{ maxLength: MESSAGE_MAX_LENGTH } satisfies Partial<HTMLInputElement>}
                         />
-                    </Grid>
-                    <Grid size="auto">
-                        <SubmitButton variant="outlined" type="submit" fullWidth />
-                    </Grid>
-                </Grid>
+                    </Box>
+                    <SubmitButton variant="outlined" type="submit" fullWidth />
+                </Stack>
             </FormErrorProvider>
         </FormContainer>
     );
diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
index c87e121f..43d18493 100644
--- a/src/pages/announcements/announcements-page.tsx
+++ b/src/pages/announcements/announcements-page.tsx
@@ -8,7 +8,7 @@
 import type { UUID } from 'node:crypto';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Divider, Grid2 as Grid, Typography } from '@mui/material';
+import { Box, Divider, Grid2 as Grid, Stack, Typography } from '@mui/material';
 import { snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
 import type { ColDef, GetRowIdParams, ValueFormatterFunc } from 'ag-grid-community';
 import { type GridTableRef } from '../../components/Grid';
@@ -119,41 +119,38 @@ export default function AnnouncementsPage() {
 
     const gridContext = useMemo(() => ({ refresh: loadDataAndSave }), [loadDataAndSave]);
 
-    // Note: using <Stack/> for the columns didn't work
     return (
         <Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
-            <Grid container direction="column" size={{ xs: 12, sm: 6, md: 4 }}>
-                <Grid size="auto">
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+                <Stack>
                     <Typography variant="subtitle1">
                         <FormattedMessage id="announcements.programNewMessage" />
                     </Typography>
-                </Grid>
-                <Grid size="auto">
                     <Divider sx={{ mt: 0.5, mb: 1.5 }} />
-                </Grid>
-                <Grid sx={{ flexGrow: 1 }}>
-                    <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
-                </Grid>
+                    <Box sx={{ flexGrow: 1 }}>
+                        <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
+                    </Box>
+                </Stack>
             </Grid>
-            <Grid container direction="column" size={{ xs: 12, sm: 6, md: 8 }}>
-                <Grid size="auto">
+            <Grid size={{ xs: 12, sm: 6, md: 8 }}>
+                <Stack>
                     <Typography variant="subtitle1" mb={0.5}>
                         <FormattedMessage id="announcements.programmedMessage" />
                     </Typography>
-                </Grid>
-                <Grid sx={{ flexGrow: 1 }}>
-                    <AgGrid<Announcement>
-                        ref={gridRef}
-                        rowData={data}
-                        alwaysShowVerticalScroll
-                        onGridReady={loadDataAndSave}
-                        columnDefs={columns}
-                        defaultColDef={defaultColDef}
-                        gridId="table-announcements"
-                        getRowId={getRowId}
-                        context={gridContext}
-                    />
-                </Grid>
+                    <Box sx={{ flexGrow: 1 }}>
+                        <AgGrid<Announcement>
+                            ref={gridRef}
+                            rowData={data}
+                            alwaysShowVerticalScroll
+                            onGridReady={loadDataAndSave}
+                            columnDefs={columns}
+                            defaultColDef={defaultColDef}
+                            gridId="table-announcements"
+                            getRowId={getRowId}
+                            context={gridContext}
+                        />
+                    </Box>
+                </Stack>
             </Grid>
         </Grid>
     );
diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx
index 1c33b70b..5f36e597 100644
--- a/src/pages/common/table-selection.tsx
+++ b/src/pages/common/table-selection.tsx
@@ -8,7 +8,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
-import { Grid2 as Grid, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
 import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
 import { defaultColDef, defaultRowSelection } from './table-config';
@@ -96,12 +96,12 @@ function TableSelection<TData>({
     }, [columnDefs]);
 
     return (
-        <Grid container direction="column" sx={{ height: '100%', width: '100%' }}>
+        <Stack sx={{ height: '100%', width: '100%' }}>
             <Typography variant="subtitle1">
                 <FormattedMessage id={titleId} />
                 {` (${selectedCount} / ${items.length})`}
             </Typography>
-            <Grid sx={{ flexGrow: 1 }}>
+            <Box sx={{ flexGrow: 1 }}>
                 <CustomAGGrid
                     gridId="table-selection"
                     ref={gridRef}
@@ -114,8 +114,8 @@ function TableSelection<TData>({
                     onGridReady={handleGridReady}
                     accentedSort
                 />
-            </Grid>
-        </Grid>
+            </Box>
+        </Stack>
     );
 }
 
diff --git a/src/pages/groups/groups-page.tsx b/src/pages/groups/groups-page.tsx
index 686e9c77..393d4fb1 100644
--- a/src/pages/groups/groups-page.tsx
+++ b/src/pages/groups/groups-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { GroupInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,7 +41,7 @@ const GroupsPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid container direction="column" spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+            <Stack spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
                 <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <GroupsTable
                         gridRef={gridRef}
@@ -49,7 +49,7 @@ const GroupsPage: FunctionComponent = () => {
                         setOpenAddGroupDialog={setOpenAddGroupDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
             <GroupModificationDialog
                 groupInfos={editingGroup}
diff --git a/src/pages/profiles/profiles-page.tsx b/src/pages/profiles/profiles-page.tsx
index 543ffcdc..a084c4e4 100644
--- a/src/pages/profiles/profiles-page.tsx
+++ b/src/pages/profiles/profiles-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserProfile } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -42,7 +42,7 @@ const ProfilesPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid container direction="column" spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+            <Stack spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
                 <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <ProfilesTable
                         gridRef={gridRef}
@@ -50,7 +50,7 @@ const ProfilesPage: FunctionComponent = () => {
                         setOpenAddProfileDialog={setOpenAddProfileDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddProfileDialog gridRef={gridRef} open={openAddProfileDialog} setOpen={setOpenAddProfileDialog} />
             <ProfileModificationDialog
                 profileId={editingProfileId}
diff --git a/src/pages/users/users-page.tsx b/src/pages/users/users-page.tsx
index 572ee5ee..48721c8d 100644
--- a/src/pages/users/users-page.tsx
+++ b/src/pages/users/users-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid2 as Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,7 +41,7 @@ const UsersPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid container direction="column" spacing={2} sx={{ height: '100%', width: '100%' }}>
+            <Stack spacing={2} sx={{ height: '100%', width: '100%' }}>
                 <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <UsersTable
                         gridRef={gridRef}
@@ -49,7 +49,7 @@ const UsersPage: FunctionComponent = () => {
                         setOpenAddUserDialog={setOpenAddUserDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddUserDialog gridRef={gridRef} open={openAddUserDialog} setOpen={setOpenAddUserDialog} />
             <UserModificationDialog
                 userInfos={editingUser}

From c3e493d2b8619a8324f9cca805d0aeaf425ffe88 Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Wed, 1 Jul 2026 18:37:51 +0200
Subject: [PATCH 04/11] fix

---
 src/pages/announcements/announcements-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
index 43d18493..94b4c76d 100644
--- a/src/pages/announcements/announcements-page.tsx
+++ b/src/pages/announcements/announcements-page.tsx
@@ -133,7 +133,7 @@ export default function AnnouncementsPage() {
                 </Stack>
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 8 }}>
-                <Stack>
+                <Stack height="100%">
                     <Typography variant="subtitle1" mb={0.5}>
                         <FormattedMessage id="announcements.programmedMessage" />
                     </Typography>

From c25d32f0137c8d3d5d75275af96ea070ae5243db Mon Sep 17 00:00:00 2001
From: Antoine Bouhours <antoine.bouhours@rte-france.com>
Date: Thu, 2 Jul 2026 09:53:36 +0200
Subject: [PATCH 05/11] fix

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/pages/common/table-selection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx
index 5f36e597..2847846a 100644
--- a/src/pages/common/table-selection.tsx
+++ b/src/pages/common/table-selection.tsx
@@ -101,7 +101,7 @@ function TableSelection<TData>({
                 <FormattedMessage id={titleId} />
                 {` (${selectedCount} / ${items.length})`}
             </Typography>
-            <Box sx={{ flexGrow: 1 }}>
+            <Box sx={{ flexGrow: 1, minHeight: 0 }}>
                 <CustomAGGrid
                     gridId="table-selection"
                     ref={gridRef}

From 62a50a575994af8b513f4ff41c95da876839677f Mon Sep 17 00:00:00 2001
From: Antoine Bouhours <antoine.bouhours@rte-france.com>
Date: Thu, 2 Jul 2026 09:53:47 +0200
Subject: [PATCH 06/11] fix

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/Grid/GridTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx
index b02d806a..4ea5d88c 100644
--- a/src/components/Grid/GridTable.tsx
+++ b/src/components/Grid/GridTable.tsx
@@ -95,7 +95,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                     {alignedRightToolbarContent}
                 </Toolbar>
             </AppBar>
-            <Box sx={{ flexGrow: 1 }}>
+            <Box sx={{ flexGrow: 1, minHeight: 0 }}>
                 <AgGrid<TData, TContext & GridTableExposed>
                     {...agGridProps}
                     ref={gridRef}

From c4fb7114544126de3afdbff7a514f3e1968f5010 Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Thu, 2 Jul 2026 15:00:33 +0200
Subject: [PATCH 07/11] fix

---
 .../announcements/announcements-page.tsx      |  6 ++---
 src/pages/common/multi-chip-cell-renderer.tsx |  2 +-
 src/pages/profiles/profiles-table.tsx         |  4 ----
 src/pages/profiles/validity-cell-renderer.tsx | 24 +++++++++++++++----
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
index 94b4c76d..cd2812a9 100644
--- a/src/pages/announcements/announcements-page.tsx
+++ b/src/pages/announcements/announcements-page.tsx
@@ -121,13 +121,13 @@ export default function AnnouncementsPage() {
 
     return (
         <Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
-            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-                <Stack>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ display: 'flex' }}>
+                <Stack height="100%" sx={{ flexGrow: 1 }}>
                     <Typography variant="subtitle1">
                         <FormattedMessage id="announcements.programNewMessage" />
                     </Typography>
                     <Divider sx={{ mt: 0.5, mb: 1.5 }} />
-                    <Box sx={{ flexGrow: 1 }}>
+                    <Box sx={{ flexGrow: 1, minHeight: 0 }}>
                         <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
                     </Box>
                 </Stack>
diff --git a/src/pages/common/multi-chip-cell-renderer.tsx b/src/pages/common/multi-chip-cell-renderer.tsx
index 0e1e963a..9670085f 100644
--- a/src/pages/common/multi-chip-cell-renderer.tsx
+++ b/src/pages/common/multi-chip-cell-renderer.tsx
@@ -14,7 +14,7 @@ const counterChipWidth = 25;
 
 const chipStyles = {
     default: {
-        marginTop: 2,
+        marginTop: 1,
         marginLeft: 1,
         maxWidth: maxChipWidth,
     },
diff --git a/src/pages/profiles/profiles-table.tsx b/src/pages/profiles/profiles-table.tsx
index 3f9ae4d1..27f770db 100644
--- a/src/pages/profiles/profiles-table.tsx
+++ b/src/pages/profiles/profiles-table.tsx
@@ -75,10 +75,6 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
             {
                 field: 'allLinksValid',
                 cellDataType: 'boolean',
-                cellStyle: () => ({
-                    display: 'flex',
-                    alignItems: 'center',
-                }),
                 cellRenderer: ValidityCellRenderer,
                 tooltipValueGetter: (p: ITooltipParams) => {
                     if (p.value == null) {
diff --git a/src/pages/profiles/validity-cell-renderer.tsx b/src/pages/profiles/validity-cell-renderer.tsx
index 31ee9494..d4d6a93e 100644
--- a/src/pages/profiles/validity-cell-renderer.tsx
+++ b/src/pages/profiles/validity-cell-renderer.tsx
@@ -7,16 +7,30 @@
 
 import { Cancel, CheckCircle, RadioButtonUnchecked } from '@mui/icons-material';
 import { ICellRendererParams } from 'ag-grid-community';
+import { Box } from '@mui/material';
 
 export const ValidityCellRenderer = (props: ICellRendererParams) => {
+    let icon;
+
     if (props.value == null) {
-        return <RadioButtonUnchecked fontSize="small" />;
-    }
-    if (props.value === true) {
-        return <CheckCircle fontSize="small" color="success" />;
+        icon = <RadioButtonUnchecked fontSize="small" />;
+    } else if (props.value === true) {
+        icon = <CheckCircle fontSize="small" color="success" />;
+    } else {
+        icon = <Cancel fontSize="small" color="error" />;
     }
 
-    return <Cancel fontSize="small" color="error" />;
+    return (
+        <Box
+            sx={{
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {icon}
+        </Box>
+    );
 };
 
 export default ValidityCellRenderer;

From 91a52749be530fff06c558d5f09f46a48e80b5ee Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Thu, 2 Jul 2026 15:06:47 +0200
Subject: [PATCH 08/11] fix

---
 src/pages/profiles/profiles-table.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/pages/profiles/profiles-table.tsx b/src/pages/profiles/profiles-table.tsx
index 27f770db..3f9ae4d1 100644
--- a/src/pages/profiles/profiles-table.tsx
+++ b/src/pages/profiles/profiles-table.tsx
@@ -75,6 +75,10 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
             {
                 field: 'allLinksValid',
                 cellDataType: 'boolean',
+                cellStyle: () => ({
+                    display: 'flex',
+                    alignItems: 'center',
+                }),
                 cellRenderer: ValidityCellRenderer,
                 tooltipValueGetter: (p: ITooltipParams) => {
                     if (p.value == null) {

From bfa78fb29d9d59531610564dff4c0de5c0403af3 Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Fri, 3 Jul 2026 09:08:47 +0200
Subject: [PATCH 09/11] fix

---
 src/pages/common/multi-chip-cell-renderer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/common/multi-chip-cell-renderer.tsx b/src/pages/common/multi-chip-cell-renderer.tsx
index 9670085f..868109e1 100644
--- a/src/pages/common/multi-chip-cell-renderer.tsx
+++ b/src/pages/common/multi-chip-cell-renderer.tsx
@@ -85,7 +85,7 @@ const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
     };
 
     return (
-        <Grid container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
+        <Grid container direction="row" wrap="nowrap" ref={containerRef}>
             {values.map((label: string, index: number) => customChip(label, index, values.length))}
         </Grid>
     );

From 1a40d14244f23ad224b9fe7ad225cdf7dab4dc5e Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Fri, 3 Jul 2026 15:27:04 +0200
Subject: [PATCH 10/11] fix

---
 src/pages/groups/modification/group-modification-form.tsx     | 2 +-
 src/pages/profiles/modification/profile-modification-form.tsx | 2 +-
 src/pages/users/modification/user-modification-form.tsx       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/groups/modification/group-modification-form.tsx b/src/pages/groups/modification/group-modification-form.tsx
index 838c9e9c..d939731f 100644
--- a/src/pages/groups/modification/group-modification-form.tsx
+++ b/src/pages/groups/modification/group-modification-form.tsx
@@ -60,7 +60,7 @@ const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({
     );
 
     return (
-        <Grid container spacing={2} marginTop={0} sx={{ height: '100%', width: '100%' }}>
+        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
             <Grid sx={{ width: '100%' }}>
                 <TextInput name={GROUP_NAME} label={'groups.table.id'} clearable={true} />
             </Grid>
diff --git a/src/pages/profiles/modification/profile-modification-form.tsx b/src/pages/profiles/modification/profile-modification-form.tsx
index e63db107..1a42adeb 100644
--- a/src/pages/profiles/modification/profile-modification-form.tsx
+++ b/src/pages/profiles/modification/profile-modification-form.tsx
@@ -42,7 +42,7 @@ const configList: ConfigSelectionProps[] = [
 
 const ProfileModificationForm: FunctionComponent = () => {
     return (
-        <Grid container spacing={2} marginTop={'auto'} sx={{ width: '100%' }}>
+        <Grid container spacing={2} marginTop={2} sx={{ width: '100%' }}>
             <Grid sx={{ width: '100%' }}>
                 <TextInput name={PROFILE_NAME} label={'profiles.table.id'} clearable={true} />
             </Grid>
diff --git a/src/pages/users/modification/user-modification-form.tsx b/src/pages/users/modification/user-modification-form.tsx
index 1ce8a1dc..67f97fa5 100644
--- a/src/pages/users/modification/user-modification-form.tsx
+++ b/src/pages/users/modification/user-modification-form.tsx
@@ -60,7 +60,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
     );
 
     return (
-        <Grid container spacing={2} marginTop={0} sx={{ height: '100%', width: '100%' }}>
+        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
             <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_NAME}

From 9e16cb3d72cb82d06dd9efc97ba2f4779b3448e4 Mon Sep 17 00:00:00 2001
From: BOUHOURS Antoine <antoine.bouhours@rte-france.com>
Date: Fri, 3 Jul 2026 17:21:15 +0200
Subject: [PATCH 11/11] Commons-ui 0.240.0

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2dae8d64..40e6134d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
             "dependencies": {
                 "@emotion/react": "^11.14.0",
                 "@emotion/styled": "^11.14.1",
-                "@gridsuite/commons-ui": "0.239.0",
+                "@gridsuite/commons-ui": "0.240.0",
                 "@hookform/resolvers": "^4.1.3",
                 "@mui/icons-material": "^6.5.0",
                 "@mui/lab": "6.0.1-beta.36",
@@ -3200,9 +3200,9 @@
             }
         },
         "node_modules/@gridsuite/commons-ui": {
-            "version": "0.239.0",
-            "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.239.0.tgz",
-            "integrity": "sha512-9S6mIdp9ZKDh+aWzo9mETuiadHvBa14wc4Pd+vSGf3Yg6cfN40S1E41OJj8Nov4g+nc0dgJr7k/xdNLElDnRNA==",
+            "version": "0.240.0",
+            "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.240.0.tgz",
+            "integrity": "sha512-sGP5jDrxpPje7aCYs4SwLqVxPldqpcLIPTeQL9zArWHocHYdTQGU6Fa6JGQV3YWZa4D6tVNa3iYtJKuUpqKkFg==",
             "license": "MPL-2.0",
             "dependencies": {
                 "@ag-grid-community/locale": "^35.3.1",
diff --git a/package.json b/package.json
index 47a1e34f..067d8668 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.239.0",
+        "@gridsuite/commons-ui": "0.240.0",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^6.5.0",
         "@mui/lab": "6.0.1-beta.36",