From 8b4afe573141f6d8a73ce85d5a614f194182f403 Mon Sep 17 00:00:00 2001
From: "Masaharu.Kato" <masaharu.kato@ivis.co.jp>
Date: Tue, 24 Jun 2025 11:35:54 +0900
Subject: [PATCH] =?UTF-8?q?=E8=B3=BC=E5=85=A5=E5=B1=A5=E6=AD=B4=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AE=E3=83=87=E3=82=B6?=
 =?UTF-8?q?=E3=82=A4=E3=83=B3=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/StuffHistoryDialog.tsx     | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/StuffHistoryDialog.tsx b/frontend/src/components/StuffHistoryDialog.tsx
index d36d15e..4ccd34e 100644
--- a/frontend/src/components/StuffHistoryDialog.tsx
+++ b/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>