From f9da8238f65dec6de56d3c6b315f90842a3c2bb9 Mon Sep 17 00:00:00 2001
From: "Lei.Nade" <lei.nade@ivis.co.jp>
Date: Tue, 17 Jun 2025 10:15:09 +0900
Subject: [PATCH] =?UTF-8?q?=E8=B2=B7=E3=81=86=E3=82=82=E3=81=AE=E3=83=AA?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=A7=E7=94=BB=E9=9D=A2=E3=81=8C=E5=B0=8F?=
 =?UTF-8?q?=E3=81=95=E3=81=8F=E3=81=AA=E3=81=A3=E3=81=9F=E6=99=82=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=8C=E4=B8=8B=E3=81=AB=E8=A1=8C=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TaskListPage.tsx | 139 ++++++++++++++--------------
 1 file changed, 68 insertions(+), 71 deletions(-)

diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 74b756d..ac19ea3 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/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>