improve tobuylist UI

frontend/src/pages/TaskListPage.tsx

@@ -200,18 +200,20 @@ const TaskListPage: React.FC = () => {
               */}
               {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
               <ListItemText
-                primary={`${tobuy.stuffName} × ${tobuy.amount}`}
-                //secondary={tobuy.amount}
-                sx={{
-                  textDecoration: false ? 'line-through' : 'none',
-                }}
+                primary={tobuy.stuffName}
               />
                 {/* 買い物リスト：食材情報記入ボタン */}
               <ListItemSecondaryAction>
-                <Tooltip title="食材情報追加">
+                <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
+                  {`× ${tobuy.amount}`}
+                </Typography>
+                <Tooltip title="購入情報を記入">
+                  {/* デフォルトの marginRightの設定（マイナス）を上書き */}
                   <IconButton
+                    color="primary"
+                    sx={{ marginRight: 0}}
                     edge="end"
-                    aria-label="食材情報追加"
+                    aria-label="購入情報を記入"
                     onClick={() => {
                       setOpenInfoDialog(true)
                       setSelectedTask(tobuy.tobuyId)