文字を大きくしたりしました

frontend/src/pages/StockPage.tsx

@@ -204,12 +204,8 @@ const StockPage: React.FC = () => {
   };
 
   /**
-   * セルを選択する関数. 再度クリックで選択解除 → 修正
+   * セルを選択して編集画面
    */
-  // const handleRowClick = (stock: Stock) => {
-  //   setSelectedRow(prev => (prev?.stockId === stock.stockId ? null : stock));
-  // };
-  // セルを選択して編集画面
   const handleRowClick = (stock: Stock) => {
     setSelectedRow(stock);           // 行選択
     setEditStock({ ...stock });      // 編集対象にセット
@@ -301,7 +297,6 @@ const StockPage: React.FC = () => {
     }
   };
 
-
   /** 編集ダイアログを閉じる */
   const handleCloseEdit = () => {
     setIsEditOpen(false);
@@ -332,9 +327,9 @@ const StockPage: React.FC = () => {
           <Table>
             <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
               <TableRow>
-                <TableCell align="center" sx={{ width: '30%' }}>食材名</TableCell>
-                <TableCell align="center" sx={{ width: '30%' }}>数量</TableCell>
-                <TableCell align="center" sx={{ width: '40%' }}>消費・賞味期限</TableCell>
+                <TableCell align="center" sx={{ width: '40%', fontSize: '16px'}}>食材名</TableCell>
+                <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell>
+                <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>消費・賞味期限</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -361,9 +356,9 @@ const StockPage: React.FC = () => {
                     onClick={() => handleRowClick(stock)}
                     style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                   >
-                    <TableCell align="center" sx={{ width: '30%' }}>{stock.stuffName}</TableCell>
-                    <TableCell align="center" sx={{ width: '30%' }}>{stock.amount}</TableCell>
-                    <TableCell align="center" sx={{ width: '40%' }}
+                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>{stock.stuffName}</TableCell>
+                    <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>{stock.amount}</TableCell>
+                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}
                       style={daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                     >
                       {formatDate(stock.expDate)}
@@ -375,7 +370,6 @@ const StockPage: React.FC = () => {
           </Table>
         </TableContainer>
 
-
         {/* 編集ダイアログ */}
         <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
           <DialogTitle>
@@ -401,7 +395,6 @@ const StockPage: React.FC = () => {
                       e.preventDefault();
                     }
                   }}
-
                 />
                 <TextField
                   label="購入価格"
@@ -417,7 +410,6 @@ const StockPage: React.FC = () => {
                       e.preventDefault();
                     }
                   }}
-
                 />
                 {/* 購入日・消費期限を横並びに */}
                 <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
@@ -532,250 +524,211 @@ const StockPage: React.FC = () => {
         在庫リスト
       </Typography>
 
-      {/* <Box sx={{ textAlign: 'right' }}> */}
-      {/* <Box
+      <Box
         sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 1000,
+          position: 'fixed',     // ← sticky から fixed に変更
+          bottom: 0,             // ← 下に固定
+          left: 0,
+          right: 0,
+          zIndex: 1300,          // ダイアログよりは低く
           backgroundColor: '#f5f5f5',
           padding: 2,
           display: 'flex',
-          gap: 0.5,
-          justifyContent: 'flex-end', // ← 右寄せ
-          borderBottom: 'none', // ← これで線を消す
-          boxShadow: 'none',    // ← 影も消す
+          justifyContent: 'flex-end', // ← 左寄せ
+          boxShadow: 'none', // 軽めの上向きシャドウ
         }}
-      > */}
-        <Box
-          sx={{
-            position: 'fixed',     // ← sticky から fixed に変更
-            bottom: 0,             // ← 下に固定
-            left: 0,
-            right: 0,
-            zIndex: 1300,          // ダイアログよりは低く
-            backgroundColor: '#f5f5f5',
-            padding: 2,
-            display: 'flex',
-            boxShadow: 'none', // 軽めの上向きシャドウ
-          }}
-        >
-
-          {/* 在庫の食材追加ボタン */}
-          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          追加
-        </Button> */}
-          {/* <Button variant="contained" color="primary" onClick={handleOpenAdd} sx={{ mt: 3, mb: 2, mr: 1 }}>
-          追加
-        </Button> */}
-          {/* <Typography variant="caption" color="textSecondary">
-          食材の追加
-        </Typography>
-        <Fab
-          color="primary"
-          onClick={handleOpenAdd}
-        >
-          <AddIcon />
-        </Fab> */}
-          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
-      ml: 90, }}>
-            <Typography variant="caption" color="textSecondary">
-              食材の追加
-            </Typography>
-            <Fab color="primary" onClick={handleOpenAdd} >
-              <AddIcon />
-            </Fab>
-          </Box>
+      >
 
+        {/* 在庫の食材追加ボタン */}
+        <Box sx={{
+          display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
+          mr: 2,
+        }}>
+          <Typography variant="caption" color="textSecondary">
+            食材の追加
+          </Typography>
+          <Fab color="primary" onClick={handleOpenAdd} >
+            <AddIcon />
+          </Fab>
+        </Box>
 
-          {/* 新規タスク作成ダイアログ */}
-          <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
-            <Box display="flex" alignItems="center" >
-              <DialogTitle sx={{ flexGrow: 1 }}>
-                <Typography variant="h5" >
-                  在庫に食材を追加
-                </Typography>
-              </DialogTitle>
-              <FormGroup row>
-                <FormControlLabel
-                  control={<Checkbox />}
-                  label="食材を新規追加"
-                  checked={newStock.newAddition}
-                  onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
-                />
-              </FormGroup>
-            </Box>
-            <DialogContent>
-              <Box sx={{ pt: 1 }}>
-                {/*材料カテゴリ選択 */}
-
-                <FormControl sx={{ width: "50%", marginBottom: 2 }}>
-                  <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    value={newStock.category}
-                    onChange={(e) => onChangeCategory(e.target.value)}
-                  >
-                    <MenuItem value="乳製品">乳製品</MenuItem>
-                    <MenuItem value="魚・肉">魚・肉</MenuItem>
-                    <MenuItem value="野菜">野菜</MenuItem>
-                    <MenuItem value="調味料">調味料</MenuItem>
-                    <MenuItem value="その他">その他</MenuItem>
-                  </Select>
-                </FormControl>
-
-                {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
-                  <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
-                  <Select
-                    labelId="demo-simple-select-label"
-                    value={newStock.stuffId}
-                    onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
-                  >
-                    {stuffs.map((stuff) => (
-                      <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
-                        {stuff.stuffName}
-                      </MenuItem>
-                    ))}
-                  </Select>
-                </FormControl>}
-
-                {/* タスクタイトル入力フィールド */}
-                {newStock.newAddition && <TextField
-                  autoFocus
-                  margin="dense"
-                  label="材料名"
-                  fullWidth
-                  value={newStock.stuffName}
-                  onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
-                  sx={{ marginBottom: 2 }}
-                />}
-                {/* 数量入力フィールド */}
-                <TextField
-                  margin="dense"
-                  label="数量"
-                  fullWidth
-                  value={newStock.amount}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    const parsedValue = parseInt(value, 10); // 数値に変換
-                    if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
-                      setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
-                    }
-                  }}
-                  // sx={{ width: "50%" }}
-                  type="number"
-                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+        {/* 新規タスク作成ダイアログ */}
+        <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
+          <Box display="flex" alignItems="center" >
+            <DialogTitle sx={{ flexGrow: 1 }}>
+              <Typography variant="h5" >
+                在庫に食材を追加
+              </Typography>
+            </DialogTitle>
+            <FormGroup row>
+              <FormControlLabel
+                control={<Checkbox />}
+                label="食材を新規追加"
+                checked={newStock.newAddition}
+                onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
+              />
+            </FormGroup>
+          </Box>
+          <DialogContent>
+            <Box sx={{ pt: 1 }}>
+              {/*材料カテゴリ選択 */}
+
+              <FormControl sx={{ width: "50%", marginBottom: 2 }}>
+                <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  value={newStock.category}
+                  onChange={(e) => onChangeCategory(e.target.value)}
+                >
+                  <MenuItem value="乳製品">乳製品</MenuItem>
+                  <MenuItem value="魚・肉">魚・肉</MenuItem>
+                  <MenuItem value="野菜">野菜</MenuItem>
+                  <MenuItem value="調味料">調味料</MenuItem>
+                  <MenuItem value="その他">その他</MenuItem>
+                </Select>
+              </FormControl>
+
+              {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
+                <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
+                <Select
+                  labelId="demo-simple-select-label"
+                  value={newStock.stuffId}
+                  onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
+                >
+                  {stuffs.map((stuff) => (
+                    <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
+                      {stuff.stuffName}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>}
+
+              {/* タスクタイトル入力フィールド */}
+              {newStock.newAddition && <TextField
+                autoFocus
+                margin="dense"
+                label="材料名"
+                fullWidth
+                value={newStock.stuffName}
+                onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
+                sx={{ marginBottom: 2 }}
+              />}
+              {/* 数量入力フィールド */}
+              <TextField
+                margin="dense"
+                label="数量"
+                fullWidth
+                value={newStock.amount}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  const parsedValue = parseInt(value, 10); // 数値に変換
+                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
+                    setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
+                  }
+                }}
+                // sx={{ width: "50%" }}
+                type="number"
+                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+              />
+              {/* 購入価格入力フィールド */}
+              <TextField
+                margin="dense"
+                label="購入価格"
+                fullWidth
+                value={newStock.price}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  const parsedValue = parseInt(value, 10); // 数値に変換
+                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
+                    setNewStock({ ...newStock, price: parsedValue }); // number型で保存
+                  }
+                }}
+                // sx={{ width: "50%" }}
+                type="number"
+                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+              />
+
+              {/* 購入日・消費期限を横並びに */}
+              <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
+                {/* 購入日入力フィールド */}
+                <DatePicker
+                  popperClassName="custom-datepicker-popper"
+                  selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="購入日(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal // ← 他の文字との重なり対策
                 />
-                {/* 購入価格入力フィールド */}
-                <TextField
-                  margin="dense"
-                  label="購入価格"
-                  fullWidth
-                  value={newStock.price}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    const parsedValue = parseInt(value, 10); // 数値に変換
-                    if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
-                      setNewStock({ ...newStock, price: parsedValue }); // number型で保存
-                    }
-                  }}
-                  // sx={{ width: "50%" }}
-                  type="number"
-                  inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+                {/* 消費・賞味期限入力フィールド */}
+                <DatePicker
+                  popperClassName="custom-datepicker-popper"
+                  selected={newStock.expDate ? new Date(newStock.expDate) : null}
+                  onChange={(date) =>
+                    setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
+                  }
+                  dateFormat="yyyy/MM/dd"
+                  customInput={
+                    <TextField
+                      margin="dense"
+                      label="消費・賞味期限(yyyy/MM/dd)"
+                      fullWidth
+                    />
+                  }
+                  isClearable
+                //withPortal
                 />
-
-                {/* 購入日・消費期限を横並びに */}
-                <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-                  {/* 購入日入力フィールド */}
-                  <DatePicker
-                    popperClassName="custom-datepicker-popper"
-                    selected={newStock.buyDate ? new Date(newStock.buyDate) : null}
-                    onChange={(date) =>
-                      setNewStock({ ...newStock, buyDate: date ? formatDateLocal(date) : '' })
-                    }
-                    dateFormat="yyyy/MM/dd"
-                    customInput={
-                      <TextField
-                        margin="dense"
-                        label="購入日(yyyy/MM/dd)"
-                        fullWidth
-                      />
-                    }
-                    isClearable
-                  //withPortal // ← 他の文字との重なり対策
-                  />
-                  {/* 消費・賞味期限入力フィールド */}
-                  <DatePicker
-                    popperClassName="custom-datepicker-popper"
-                    selected={newStock.expDate ? new Date(newStock.expDate) : null}
-                    onChange={(date) =>
-                      setNewStock({ ...newStock, expDate: date ? formatDateLocal(date) : '' })
-                    }
-                    dateFormat="yyyy/MM/dd"
-                    customInput={
-                      <TextField
-                        margin="dense"
-                        label="消費・賞味期限(yyyy/MM/dd)"
-                        fullWidth
-                      />
-                    }
-                    isClearable
-                  //withPortal
-                  />
-                </Box>
               </Box>
-            </DialogContent>
-            <DialogActions>
-              <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
-              <Button onClick={handleCreateStock} variant="contained">
-                追加
-              </Button>
-            </DialogActions>
-          </Dialog>
-
-          {/* 在庫の食材編集ボタン（全テーブル共通）
-        <Button variant="contained" color="success" onClick={handleOpenEdit} sx={{
-          mt: 3, mb: 2, mr: 1
-        }}>
-          詳細・編集
-        </Button> */}
-
-          {/* 在庫の食材削除ボタン （全テーブル共通）
-        <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button> */}
-
-        </Box>
-
-        {/* 在庫一覧リスト */}
-        {/* 乳製品 */}
-        <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["乳製品"])}
-        </div>
-
-        {/* 肉・魚 */}
-        <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["魚・肉"])}
-        </div>
-
-        {/* 野菜 */}
-        <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["野菜"])}
-        </div>
-
-        {/* 調味料 */}
-        <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["調味料"])}
-        </div>
-
-        {/* その他 */}
-        <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
-        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
-          {StockTable(stocks, ["その他"])}
-        </div>
-        <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
+            </Box>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
+            <Button onClick={handleCreateStock} variant="contained">
+              追加
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </Box>
+
+      {/* 在庫一覧リスト */}
+      {/* 乳製品 */}
+      <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["乳製品"])}
+      </div>
+
+      {/* 肉・魚 */}
+      <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["魚・肉"])}
+      </div>
+
+      {/* 野菜 */}
+      <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["野菜"])}
+      </div>
+
+      {/* 調味料 */}
+      <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["調味料"])}
+      </div>
+
+      {/* その他 */}
+      <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
+        {StockTable(stocks, ["その他"])}
+      </div>
+      <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
     </Container>
   );
 };