購入履歴ダイアログのデザイン調整

frontend/src/components/StuffHistoryDialog.tsx

@@ -14,7 +14,8 @@ import {
   TableHead, // 追加
   TableRow, // 追加
   Paper,
-  Typography, // 追加: TableContainerの背景用
+  Typography,
+  styled, // 追加: TableContainerの背景用
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close'; // 追加: 閉じるアイコンをインポート
 import { StockHistory } from '../types/types';
@@ -31,6 +32,14 @@ const StuffHistoryDialog = ({
   stockHistories: StockHistory[],
 }) => {
 
+  const StyledTableCell = styled(TableCell)({
+    paddingTop: '8px',
+    paddingBottom: '8px',
+    paddingLeft: '8px',
+    paddingRight: '8px',
+    whiteSpace: 'nowrap',
+  })
+
   return (
     <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '90vw', maxHeight: '80vh' } }}>
       <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -62,15 +71,15 @@ const StuffHistoryDialog = ({
               overflowX: 'auto',
             }}
           >
-            <Table sx={{ minWidth: 400 }} aria-label="purchase history table">
-              <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
+            <Table aria-label="purchase history table">
+              <TableHead sx={{ backgroundColor: "#ebcba2", color: "#333" }}>
                 <TableRow>
                   {/* 各ヘッダーセルに white-space: nowrap; を適用 */}
-                  <TableCell sx={{ whiteSpace: 'nowrap' }}>購入日</TableCell>
+                  <StyledTableCell>購入日</StyledTableCell>
                   {/* 「購入店舗」ヘッダーも nowrap にし、minWidth でスクロールを考慮 */}
-                  <TableCell sx={{ whiteSpace: 'nowrap', minWidth: '120px' }}>購入店舗</TableCell>
-                  <TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入数量</TableCell>
-                  <TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>購入価格</TableCell>
+                  <StyledTableCell>購入店舗</StyledTableCell>
+                  <StyledTableCell align="right">購入数量</StyledTableCell>
+                  <StyledTableCell align="right">購入価格</StyledTableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -80,13 +89,13 @@ const StuffHistoryDialog = ({
                     sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                   >
                     {/* 各ボディセルに white-space: nowrap; を適用 */}
-                    <TableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}>
+                    <StyledTableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap' }}>
                       {history.buyDate}
-                    </TableCell>
+                    </StyledTableCell>
                     {/* 「購入店舗」セルに nowrap と minWidth を適用 */}
-                    <TableCell sx={{ whiteSpace: 'nowrap', minWidth: '150px' }}>{history.shop || ''}</TableCell>
-                    <TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.buyAmount}</TableCell>
-                    <TableCell align="right" sx={{ whiteSpace: 'nowrap' }}>{history.price}</TableCell>
+                    <StyledTableCell sx={{whiteSpace: 'wrap'}}>{history.shop || ''}</StyledTableCell>
+                    <StyledTableCell align="right" sx={{pr: '16px'}}>{history.buyAmount}</StyledTableCell>
+                    <StyledTableCell align="right" sx={{pr: '16px'}}>{history.price}</StyledTableCell>
                   </TableRow>
                 ))}
               </TableBody>