買うものリストで画面が小さくなった時ボタンが下に行く

frontend/src/pages/TaskListPage.tsx

@@ -224,72 +224,44 @@ const TaskListPage: React.FC = () => {
                 mb: 1,
                 borderRadius: 1,
                 boxShadow: 1,
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                px: 1,
               }}
             >
               {/* 食材名 */}
               <ListItemText
                 primary={tobuy.stuffName}
+                sx={{
+                maxWidth: '60%',
+                wordBreak: 'break-word',
+                flexGrow: 1,
+                }}
               />
-              {/* 買い物リスト：食材情報記入ボタン */}
-              <ListItemSecondaryAction>
-                <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
-                  {`× ${tobuy.amount}`}
-                </Typography>
-                {/* 買い物リスト：数量変更ボタン */}
-                <Tooltip title="数量変更">
-                  <IconButton sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="数量変更"
-                  onClick={() => {
-                      setOpenAmountDialog(true)
-                      setEditingItem(tobuy)
-                    }}
-                  >
-                    <EditIcon />
-                  </IconButton>
-                </Tooltip>
-                {/* 買い物リスト：食材情報記入ボタン */}
-                <Tooltip title="購入情報を記入">
-                  <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
-                    onClick={() => {
-                      setOpenInfoDialog(true)
-                      setSelectedToBuyId(tobuy.tobuyId)
-                      // handleDeleteTask(tobuy.tobuyId)
-                    }}>
-                    <ShoppingBasketIcon />
-                  </IconButton>
-                </Tooltip>
-
-                {/* 買い物リスト：食材削除ボタン */}
-                <Tooltip title="項目を削除"
-                  componentsProps={{
-                    tooltip: {
-                      sx: {
-                        backgroundColor: "white",
-                        color: "red",
-                        fontSize: "0.8rem",
-                        padding: "6px",
-                        borderRadius: "6px",
-                      },
-                    },
-                  }}
-                >
-
-                  <IconButton
-                    edge="end"
-                    sx={{ marginRight: 0, marginLeft: 0 }}
-                    aria-label="delete"
-                    onClick={() => {//handleDeleteTask(tobuy.tobuyId)
-                      setSelectedDeleteTask(tobuy)
-                      setOpenDeleteDialog(true)
-                    }
-                  }
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </Tooltip>
-
-              </ListItemSecondaryAction>
-
-            </ListItem>
+              <Box sx={{ display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.5 }}>
+                  <Typography variant="body1" component="span">
+                    {`× ${tobuy.amount}`}
+                  </Typography>
+                  <Tooltip title="数量変更">
+                    <IconButton size="small" onClick={() => { setOpenAmountDialog(true); setEditingItem(tobuy); }}>
+                      <EditIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="購入情報を記入">
+                    <IconButton size="small" color="primary" onClick={() => { setOpenInfoDialog(true); setSelectedToBuyId(tobuy.tobuyId); }}>
+                      <ShoppingBasketIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="項目を削除">
+                    <IconButton size="small" color="error" onClick={() => { setSelectedDeleteTask(tobuy); setOpenDeleteDialog(true); }}>
+                      <DeleteIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              </ListItem>
           ))}
         </List>
       </div>
@@ -345,18 +317,43 @@ const TaskListPage: React.FC = () => {
         sx={{ overflow: "hidden" }}
       >
         <DialogTitle>食材の削除</DialogTitle>
-        <DialogContent>
+        <DialogContent
+          sx={{
+            wordBreak: 'break-word',
+            px: 2,
+            py: 1,
+          }}
+        >
           {selectedDeleteTask && (
-            <>
-              <Typography variant="h4">{selectedDeleteTask.stuffName}を削除します。</Typography>
-              <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-              <Button onClick={() =>  setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
-              <Button variant="contained" color="error" onClick={() => {
-                handleDeleteToBuy(selectedDeleteTask.tobuyId);
-                setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
-              }}
-                style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
-            </>
+            <Box>
+              <Typography
+                variant="h6"
+                sx={{ fontWeight: 'bold', mb: 1 }}
+              >
+                {selectedDeleteTask.stuffName}を削除します。
+              </Typography>
+              <Typography
+                variant="body2"
+                color="error"
+                sx={{ mb: 2 }}
+              >
+                ⚠️ 注意: 削除すると復元できません。
+              </Typography>
+
+              <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
+                <Button onClick={() => setOpenDeleteDialog(false)}>キャンセル</Button>
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={() => {
+                    handleDeleteToBuy(selectedDeleteTask.tobuyId);
+                    setOpenDeleteDialog(false);
+                  }}
+                >
+                  削除
+                </Button>
+              </Box>
+            </Box>
           )}
         </DialogContent>
       </Dialog>