u

src/components/article/boxes/ArticleViewPrice.jsx

@@ -1,6 +1,5 @@
 import { Component, PureComponent } from 'react';
 import Box from '@mui/material/Box';
-import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { EditablePanelTile, PanelTile } from 'dashgui/panels';
@@ -45,12 +44,12 @@ const articlePriceTextSx = {
 };
 
 const articlePriceFieldSx = {
-  flexShrink: 0,
-  width: 'auto',
-  mr: 11,
+  flexShrink: 1,
+  width: '100%',
   '& .MuiOutlinedInput-root': {
     alignItems: 'baseline',
-    flexShrink: 0,
+    width: '100%',
+    flexShrink: 1,
   },
   '& .MuiInputBase-input': {
     fontSize: '3.5rem',
@@ -58,17 +57,6 @@ const articlePriceFieldSx = {
     height: 'auto',
     ...articlePriceTextSx,
   },
-  '& .MuiInputAdornment-root': {
-    marginRight: 0.75,
-    height: 'auto',
-    maxHeight: 'none',
-    alignItems: 'baseline',
-  },
-  '& .MuiInputAdornment-root .MuiTypography-root': {
-    fontSize: '2rem',
-    fontWeight: 700,
-    lineHeight: 1.1,
-  },
   '& .MuiOutlinedInput-notchedOutline': {
     borderWidth: '1px !important',
   },
@@ -96,6 +84,7 @@ const priceBodySx = {
   display: 'flex',
   flexDirection: 'column',
   gap: 0.75,
+  pt: 0,
 };
 
 function articleHasPackUnit(art) {
@@ -198,11 +187,6 @@ class PriceAmountField extends Component {
         slotProps={{
           input: {
             readOnly,
-            startAdornment: (
-              <InputAdornment position="start">
-                <Typography component="span">€</Typography>
-              </InputAdornment>
-            ),
           },
           htmlInput: {
             inputMode: 'decimal',
@@ -524,8 +508,8 @@ export default class ArticleViewPrice extends PureComponent {
         const max = Math.max(...prices);
         priceText =
           min === max
-            ? `€ ${formatPriceAmount(min)}`
-            : `€ ${formatPriceAmount(min)} bis € ${formatPriceAmount(max)}`;
+            ? formatPriceAmount(min)
+            : `${formatPriceAmount(min)} bis ${formatPriceAmount(max)}`;
       }
 
       return (
@@ -533,24 +517,19 @@ export default class ArticleViewPrice extends PureComponent {
           wide={1}
           minHeight={SECOND_ROW_MIN_HEIGHT}
           color={BLUE_PANEL}
+          title={
+            <Box component="span" sx={{ fontWeight: 700 }}>
+              €
+            </Box>
+          }
           contentAlignItems="flex-start"
         >
           <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }}>
-            <Typography
-              variant="caption"
-              color="text.secondary"
-              sx={{
-                letterSpacing: 0.6,
-                fontWeight: 600,
-                display: 'block',
-              }}
-            >
-              Preis auf Variantenebene pflegen
-            </Typography>
-            <Box sx={{ my: 0.75 }}>
+            <Box sx={{ width: '100%', mt: 0.5 }}>
               <Typography
                 component="div"
                 sx={{
+                  width: '100%',
                   fontSize: '1.5rem',
                   fontWeight: 700,
                   lineHeight: 1.2,
@@ -578,6 +557,7 @@ export default class ArticleViewPrice extends PureComponent {
         wide={1}
         minHeight={SECOND_ROW_MIN_HEIGHT}
         color={BLUE_PANEL}
+        title={'€'}
         contentAlignItems="flex-start"
         value={priceValue}
         onSave={this.handleSave}