u

src/components/panels/EditablePanelTile.jsx

@@ -11,14 +11,12 @@ import Typography from '@mui/material/Typography';
 import { injectMuiTheme } from './injectMuiTheme';
 import { enqueueSnackbar } from 'notistack';
 import { backendErrorFrom } from '../../utils/backendError';
-import { panelTilePaperSx } from './panelTileLayout';
+import { panelTilePaperSx, TILE_ACTION_PADDING, tileActionIconSx, tileActionSx } from './panelTileLayout';
 
 function valuesEqual(a, b) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
-const ACTION_PADDING = 12;
-
 /**
  * Panel tile with centralized inline-edit chrome.
  * Pass `onSave` to enable edit UI; omit it for read-only tiles (no edit icon).
@@ -140,12 +138,7 @@ class EditablePanelTileBase extends Component {
     if (!onSave) return null;
 
     const { editing, saving } = this.state;
-    const actionSx = {
-      position: 'absolute',
-      top: 4,
-      color: 'text.secondary',
-    };
-    const iconSx = { fontSize: 28 };
+    const iconSx = tileActionIconSx;
 
     if (!editing) {
       return (
@@ -155,7 +148,7 @@ class EditablePanelTileBase extends Component {
             aria-hidden
             tabIndex={-1}
             sx={{
-              ...actionSx,
+              ...tileActionSx,
               right: 48,
               visibility: 'hidden',
               pointerEvents: 'none',
@@ -166,7 +159,7 @@ class EditablePanelTileBase extends Component {
           <IconButton
             onClick={this.handleStartEdit}
             aria-label="Bearbeiten"
-            sx={{ ...actionSx, right: 4 }}
+            sx={{ ...tileActionSx, right: 4 }}
           >
             <EditOutlinedIcon sx={iconSx} />
           </IconButton>
@@ -181,7 +174,7 @@ class EditablePanelTileBase extends Component {
           disabled={!this.canSave()}
           aria-label="Speichern"
           color={this.canSave() ? 'primary' : 'default'}
-          sx={{ ...actionSx, right: 48 }}
+          sx={{ ...tileActionSx, right: 48 }}
         >
           {saving ? (
             <CircularProgress size={22} color="inherit" />
@@ -193,7 +186,7 @@ class EditablePanelTileBase extends Component {
           onClick={this.handleCancel}
           disabled={saving}
           aria-label="Abbrechen"
-          sx={{ ...actionSx, right: 4 }}
+          sx={{ ...tileActionSx, right: 4 }}
         >
           <CloseOutlinedIcon sx={iconSx} />
         </IconButton>
@@ -207,7 +200,7 @@ class EditablePanelTileBase extends Component {
     const { editing, draft, error } = this.state;
     const savedValue = this.getSavedValue();
     const pending = this.isDirty();
-    const actionPadding = onSave ? ACTION_PADDING : 0;
+    const actionPadding = onSave ? TILE_ACTION_PADDING : 0;
 
     return (
       <Paper