Merge remote-tracking branch 'origin/feature-frontend-lei' into feature-frontend-bug-fix

frontend/src/components/DeleteStuffDialog.tsx

@@ -26,11 +26,11 @@ const DeleteStuffDialog = ({
     sx={{ overflow: "hidden" }}
   >
     <DialogTitle>食材の削除</DialogTitle>
-    <DialogContent>
+    <DialogContent sx={{ wordBreak: 'break-word' }}>
-      <Typography sx={{ fontSize: '1.6rem' }}>{stuffName} を削除します。</Typography>
+      <Typography sx={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stuffName} を削除します。</Typography>
       <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
     </DialogContent>
-    <DialogActions>
+    <DialogActions sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
       <Button onClick={() => setOpenDialog(false)} >キャンセル</Button>
       <Button variant="contained" color="error" onClick={() => {
         onSubmit();

frontend/src/pages/TaskListPage.tsx

@@ -272,20 +272,27 @@ const TaskListPage: React.FC = () => {
                 <ListItem
                   key={tobuy.tobuyId}
                   sx={{
-                    bgcolor: "background.paper",
+                    bgcolor: 'background.paper',
                     mb: 1,
                     borderRadius: 1,
                     boxShadow: 1,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    // px: 1,
                   }}
                 >
                   {/* 食材名 */}
                   <ListItemText
+                    sx={{maxWidth: '60%', wordBreak: 'break-word', flexGrow: 1}}
                     primary={tobuy.stuffName}
                     onClick={() => handleShowHistories(tobuy)}
                   />
                   {/* 買い物リスト：食材情報記入ボタン */}
-                  <ListItemSecondaryAction>
+                  <ListItemSecondaryAction sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.5 }}>
-                    <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
+                    <Typography variant="body1" component="span" sx={{ marginRight: '4px' }}>
                       {`× ${tobuy.amount}`}
                     </Typography>
                     {/* 買い物リスト：数量変更ボタン */}