Belegupload Layout lesbar anordnen

src/components/dashboard/budget-column.tsx

@@ -8,6 +8,7 @@ import EditRoundedIcon from "@mui/icons-material/EditRounded";
 import ExpandLessRoundedIcon from "@mui/icons-material/ExpandLessRounded";
 import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
 import EuroRoundedIcon from "@mui/icons-material/EuroRounded";
+import PhotoCameraRoundedIcon from "@mui/icons-material/PhotoCameraRounded";
 import ReceiptLongRoundedIcon from "@mui/icons-material/ReceiptLongRounded";
 import TaskAltRoundedIcon from "@mui/icons-material/TaskAltRounded";
 import UploadFileRoundedIcon from "@mui/icons-material/UploadFileRounded";
@@ -863,7 +864,7 @@ export function BudgetColumn({
                                 expense.approvalStatus === "APPROVED" &&
                                 !expense.proofUrl &&
                                 canUploadProof ? (
-                                  <Stack direction={{ xs: "column", sm: "row" }} gap={1} alignItems={{ sm: "center" }}>
+                                  <Stack spacing={1} sx={{ width: "100%", maxWidth: 420 }}>
                                     <TextField
                                       label="Rechnungsdatum"
                                       type="date"
@@ -877,15 +878,25 @@ export function BudgetColumn({
                                       InputLabelProps={{ shrink: true }}
                                       size="small"
                                       required
+                                      fullWidth
                                     />
                                     <TextField
-                                      label="Beleg"
+                                      label="Rechnungsdokument"
                                       value={proofFileDrafts[expense.id]?.name ?? expense.proofUrl ?? ""}
                                       InputProps={{ readOnly: true }}
                                       size="small"
                                       fullWidth
                                     />
-                                    <Button component="label" size="small" variant="outlined" startIcon={<UploadFileRoundedIcon />} disabled={busy}>
+                                    <Stack direction="row" spacing={1}>
+                                      <Button
+                                        component="label"
+                                        size="small"
+                                        variant="outlined"
+                                        startIcon={<UploadFileRoundedIcon />}
+                                        disabled={busy}
+                                        fullWidth
+                                        sx={{ minWidth: 0 }}
+                                      >
                                         Datei
                                         <input
                                           hidden
@@ -899,7 +910,15 @@ export function BudgetColumn({
                                           }
                                         />
                                       </Button>
-                                    <Button component="label" size="small" variant="outlined" disabled={busy}>
+                                      <Button
+                                        component="label"
+                                        size="small"
+                                        variant="outlined"
+                                        startIcon={<PhotoCameraRoundedIcon />}
+                                        disabled={busy}
+                                        fullWidth
+                                        sx={{ minWidth: 0 }}
+                                      >
                                         Kamera
                                         <input
                                           hidden
@@ -914,11 +933,21 @@ export function BudgetColumn({
                                           }
                                         />
                                       </Button>
+                                    </Stack>
                                     <Button
-                                      size="small"
+                                      size="medium"
                                       variant="contained"
                                       color="success"
                                       disabled={busy}
+                                      fullWidth
+                                      sx={{
+                                        minHeight: 44,
+                                        px: 1.5,
+                                        lineHeight: 1.25,
+                                        whiteSpace: "normal",
+                                        overflowWrap: "anywhere",
+                                        textAlign: "center"
+                                      }}
                                       onClick={async () => {
                                         const proofFile = proofFileDrafts[expense.id];
                                         const invoiceDate = invoiceDateDrafts[expense.id] ?? "";