[5702] Improve table cell rendering

Bug: #5702
Signed-off-by: Florian ROUËNÉ <[email protected]>

Author: frouene

CHANGELOG.adoc

@@ -45,7 +45,7 @@
 === Improvements
 
 - https://github.com/eclipse-sirius/sirius-web/issues/5608[#5608] [diagram] Hide empty sections on the palette
-
+- https://github.com/eclipse-sirius/sirius-web/issues/5702[#5702] [table] Improve the rendering of components used in table cells
 
 
 == 2025.10.0

packages/tables/frontend/sirius-components-tables/src/cells/Cell.tsx

@@ -41,7 +41,8 @@ const isIconLabelCell = (cell: GQLCell): cell is GQLIconLabelCell => cell.__type
 
 const useStyles = makeStyles()((theme) => ({
   wrapper: {
-    padding: theme.spacing(2),
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
     height: '100%',
     width: '100%',
     cursor: 'pointer',

packages/tables/frontend/sirius-components-tables/src/cells/IconLabelCell.tsx

@@ -20,7 +20,7 @@ export const IconLabelCell = ({ cell }: IconLabelCellProps) => {
   const theme = useTheme();
 
   return (
-    <Box display="flex" alignItems="center" gap={theme.spacing(1)}>
+    <Box display="flex" alignItems="center" gap={theme.spacing(1)} sx={{ height: '100%' }}>
       <IconOverlay iconURL={cell.iconURLs} alt={cell.label} />
       {cell.label}
     </Box>

packages/tables/frontend/sirius-components-tables/src/cells/MultiSelectCell.tsx

@@ -53,7 +53,10 @@ export const MultiSelectCell = ({
       disabled={disabled || loading}
       multiple
       size="small"
-      fullWidth>
+      disableUnderline={true}
+      fullWidth
+      variant="standard"
+      sx={{ height: '100%' }}>
       {cell.options.map((option) => {
         return (
           <MenuItem key={option.id} value={option.id}>

packages/tables/frontend/sirius-components-tables/src/cells/SelectCell.tsx

@@ -25,7 +25,15 @@ export const SelectCell = ({ editingContextId, representationId, tableId, cell,
   };
 
   return (
-    <Select value={cell.value} onChange={handleChange} disabled={disabled || loading} size="small" fullWidth>
+    <Select
+      value={cell.value}
+      onChange={handleChange}
+      disabled={disabled || loading}
+      size="small"
+      fullWidth
+      disableUnderline={true}
+      variant="standard"
+      sx={{ height: '100%' }}>
       {cell.options.map((option) => {
         return (
           <MenuItem key={option.id} value={option.id}>

packages/tables/frontend/sirius-components-tables/src/cells/TextareaCell.tsx

@@ -12,20 +12,10 @@
  *******************************************************************************/
 import TextField from '@mui/material/TextField';
 import React, { useEffect, useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { TextareaCellProps, TextareaCellState } from './TextareaCell.types';
 import { useEditTextareaCell } from './useEditTextareaCell';
 
-const useTextareaCellStyles = makeStyles()(() => ({
-  wrapper: {
-    overflow: 'auto',
-    width: '100%',
-    height: '100%',
-  },
-}));
-
 export const TextareaCell = ({ editingContextId, representationId, tableId, cell, disabled }: TextareaCellProps) => {
-  const { classes } = useTextareaCellStyles();
   const [state, setState] = useState<TextareaCellState>({
     value: cell.stringValue,
   });
@@ -46,29 +36,31 @@ export const TextareaCell = ({ editingContextId, representationId, tableId, cell
   };
 
   return (
-    <div className={classes.wrapper}>
-      <TextField
-        multiline
-        value={state.value}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        disabled={disabled || loading}
-        size="small"
-        fullWidth
-        variant="standard"
-        InputProps={{
+    <TextField
+      multiline
+      value={state.value}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      disabled={disabled || loading}
+      size="small"
+      fullWidth
+      variant="standard"
+      sx={{
+        height: '100%',
+        overflow: 'auto',
+      }}
+      slotProps={{
+        input: {
           disableUnderline: true,
-          sx: {
-            marginBottom: 0,
-            padding: '0px',
-          },
-        }}
-        inputProps={{
-          sx: {
-            padding: '0px',
+          sx: { height: '100%' },
+          inputProps: {
+            sx: {
+              maxHeight: '100%',
+              overflow: 'auto !important',
+            },
           },
-        }}
-      />
-    </div>
+        },
+      }}
+    />
   );
 };

packages/tables/frontend/sirius-components-tables/src/cells/TextfieldCell.tsx

@@ -53,18 +53,14 @@ export const TextfieldCell = ({ editingContextId, representationId, tableId, cel
       fullWidth
       variant="standard"
       sx={{ height: '100%' }}
-      InputProps={{
-        disableUnderline: true,
-        sx: {
-          marginBottom: 0,
-          padding: '0px',
-          height: '100%',
-        },
-      }}
-      inputProps={{
-        sx: {
-          padding: '0px',
-          height: '100%',
+      slotProps={{
+        input: {
+          disableUnderline: true,
+          sx: {
+            marginBottom: 0,
+            padding: '0px',
+            height: '100%',
+          },
         },
       }}
     />