u

src/components/article/boxes/ArticleViewPrice.jsx

@@ -228,11 +228,13 @@ class PriceOverlay extends Component {
       unitOptions,
       articleUnitSi,
       onOpenEditor,
+      onOpenTiers,
     } = this.props;
     if (!editing || draft == null) return null;
     return (
       <PriceUnitCorner
         hasUnit={draft.hasUnit}
+        onOpenTiers={onOpenTiers}
         onToggleHasUnit={(hasUnit) => {
           if (hasUnit) {
             const unitamount = draft.unitamount || '1';
@@ -557,7 +559,6 @@ export default class ArticleViewPrice extends PureComponent {
                   : undefined
               }
               readOnly={!editing}
-              onOpenTiers={this.openTiersDialog}
             />
           </Box>
         )}
@@ -575,6 +576,7 @@ export default class ArticleViewPrice extends PureComponent {
             unitOptions={unitOptions}
             articleUnitSi={articleData.unit?.si}
             onOpenEditor={this.openUnitEditor}
+            onOpenTiers={this.openTiersDialog}
           />
         )}
         display={

src/components/article/boxes/PriceTaxRow.jsx

@@ -1,8 +1,6 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
-import IconButton from '@mui/material/IconButton';
-import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import {
   TINT_CHIP,
   TINT_PILL_ACTIVE,
@@ -50,7 +48,7 @@ export class TaxRatePills extends Component {
 
 export class PriceTaxRow extends Component {
   render() {
-    const { rates, selected, onSelectTax, readOnly, onOpenTiers } = this.props;
+    const { rates, selected, onSelectTax, readOnly } = this.props;
     return (
       <Box
         sx={{
@@ -67,20 +65,6 @@ export class PriceTaxRow extends Component {
           onSelect={onSelectTax}
           readOnly={readOnly}
         />
-        <IconButton
-          type="button"
-          size="small"
-          aria-label="Staffelpreise"
-          disabled={readOnly}
-          onClick={readOnly ? undefined : onOpenTiers}
-          sx={{
-            p: 0.5,
-            visibility: readOnly ? 'hidden' : 'visible',
-            pointerEvents: readOnly ? 'none' : 'auto',
-          }}
-        >
-          <LayersOutlinedIcon sx={{ fontSize: 28 }} />
-        </IconButton>
       </Box>
     );
   }

src/components/article/boxes/PriceUnitRow.jsx

@@ -6,6 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
+import LayersOutlinedIcon from '@mui/icons-material/LayersOutlined';
 import StraightenOutlinedIcon from '@mui/icons-material/StraightenOutlined';
 import Switch from '@mui/material/Switch';
 import TextInput from '../../TextInput';
@@ -16,12 +17,12 @@ import {
 
 const priceUnitCornerSx = {
   position: 'absolute',
-  top: 72,
+  bottom: 8,
   right: 4,
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  gap: 1.25,
+  gap: 0.25,
   zIndex: 2,
 };
 
@@ -119,9 +120,18 @@ export class PriceUnitRow extends Component {
 
 export class PriceUnitCorner extends Component {
   render() {
-    const { hasUnit, onToggleHasUnit, onOpenEditor } = this.props;
+    const { hasUnit, onToggleHasUnit, onOpenEditor, onOpenTiers } = this.props;
     return (
       <Box sx={priceUnitCornerSx}>
+        <IconButton
+          type="button"
+          size="small"
+          aria-label="Staffelpreise"
+          onClick={onOpenTiers}
+          sx={{ p: 0.5 }}
+        >
+          <LayersOutlinedIcon sx={{ fontSize: 28 }} />
+        </IconButton>
         <Switch
           size="small"
           checked={Boolean(hasUnit)}