u

src/components/manifest/OrderDocumentsTiles.jsx

@@ -9,7 +9,6 @@ import Typography from '@mui/material/Typography';
 import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
 import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
 import AddIcon from '@mui/icons-material/Add';
-import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import { PanelTile } from 'dashgui/panels';
 import { formatDate } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
@@ -239,33 +238,29 @@ export class OrderDocumentsTiles extends PureComponent {
                     },
                   }}
                 >
-                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.25 }}>
-                    <Stack direction="row" spacing={0.75} alignItems="center">
-                      <CheckCircleOutlineOutlinedIcon sx={{ fontSize: 16, color: 'success.main' }} />
-                      <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem' }}>
-                        #{pay.id}
-                      </Typography>
-                    </Stack>
-                    <Typography
-                      variant="subtitle2"
-                      sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums' }}
-                    >
-                      +{formatPrice(pay.amount)}
-                    </Typography>
-                  </Box>
-
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <Stack direction="row" spacing={0.5} alignItems="center">
+                    <Stack direction="row" spacing={0.75} alignItems="center" sx={{ minWidth: 0, overflow: 'hidden' }}>
-                      {typeIcon(pType, { fontSize: 15, color: 'text.secondary' })}
+                      <Box sx={{ display: 'flex', alignItems: 'center', color: 'text.secondary', flexShrink: 0 }}>
-                      <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
+                        {typeIcon(pType, { fontSize: 16 })}
+                      </Box>
+                      <Typography variant="body2" sx={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {typeLabel(pType)}
                       </Typography>
                     </Stack>
-                    {pay.date ? (
+
-                      <Typography variant="caption" color="text.secondary">
+                    <Stack direction="row" spacing={1} alignItems="center" sx={{ flexShrink: 0, ml: 1 }}>
-                        {formatDate(pay.date)}
+                      {pay.date ? (
+                        <Typography variant="caption" color="text.secondary">
+                          {formatDate(pay.date)}
+                        </Typography>
+                      ) : null}
+                      <Typography
+                        variant="subtitle2"
+                        sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums' }}
+                      >
+                        +{formatPrice(pay.amount)}
                       </Typography>
-                    ) : null}
+                    </Stack>
                   </Box>
                 </Card>
               );