スタイル調整

frontend/src/App.css

@@ -23,8 +23,8 @@ body {
 
 /* Material UIのコンテナコンポーネントのカスタマイズ */
 .MuiContainer-root {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  /* padding-top: 24px;
+  padding-bottom: 24px; */
 }
 
 /* Material UIのペーパーコンポーネントのカスタマイズ */

frontend/src/components/AddByRecipeDialog.tsx

@@ -76,10 +76,10 @@ const AddByRecipeDialog = ({
           />
         </DialogTitle>
         <DialogContent dividers sx={{ padding: 2 }}>
-          <Typography variant="h3">
+          <Typography sx={{fontSize: '1.5rem'}}>
             {recipe.recipeName}
           </Typography>
-          <Typography>
+          <Typography sx={{mt: 2, mb: 2}}>
             ({recipe.maxServings}人分在庫あり)
           </Typography>
           <div>
@@ -108,7 +108,7 @@ const AddByRecipeDialog = ({
               type="number"
               margin="dense"
               label="何人前"
-              fullWidth
+              className="numberField"
               defaultValue={1}
               value={numOfPeople}
               onChange={(e) => {
@@ -116,7 +116,6 @@ const AddByRecipeDialog = ({
                 // setNumOfPeaple(!isNaN(num) ? num : '');
                 setNumOfPeaple(e.target.value);
               }}
-              sx={{ minWidth: "8px", width: "100%" }}
               inputProps={{ inputMode: "numeric", min: 1, pattern: "[0-9]*" }} // ここで整数のみ許可
 
             />
@@ -140,7 +139,7 @@ const AddByRecipeDialog = ({
                 const finalAddResult = await toBuyApi.addByRecipe(recipe.recipeId, num, checked);
                 setOpenDialog(false);
                 if (finalAddResult.data.length === 0) {
-                  showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした！');
+                  showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした。');
                 } else {
                   showSuccessMessage('レシピが保存されて買うものリストに追加されました！');
                 }

frontend/src/components/Layout.tsx

@@ -76,10 +76,6 @@ const Layout: React.FC = () => {
       navigate('/login');
     };
 
-
-
-
-
     // メニューを開閉するハンドラー
     const toggleDrawer = () => {
       setDrawerOpen(!drawerOpen);
@@ -119,7 +115,21 @@ const Layout: React.FC = () => {
     sessionStorage.removeItem('globalMessage');
   };
 
-  
+  const onBottomNaviChange = (event: React.SyntheticEvent, value: any) => {
+    setBottomNavi(value);
+    switch (value) {
+      case 0:
+        navigate('stock');
+        break;
+      case 1:
+        navigate('tasks');
+        break;
+      case 2:
+        navigate('recipeList');
+        break;
+    }
+    // ここでルーティング処理などを行う
+  }
 
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
@@ -135,29 +145,11 @@ const Layout: React.FC = () => {
           </Toolbar>
         </AppBar>
 
-
-
-
-
         <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
           <BottomNavigation
             showLabels
             value={bottomNavi}
-            onChange={(event, newValue) => {
-              setBottomNavi(newValue);
-              switch (newValue) {
-                case 0:
-                  navigate('stock');
-                  break;
-                case 1:
-                  navigate('tasks');
-                  break;
-                case 2:
-                  navigate('recipeList');
-                  break;
-              }
-              // ここでルーティング処理などを行う
-            }}
+            onChange={onBottomNaviChange}
           >
             <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
             <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
@@ -165,10 +157,9 @@ const Layout: React.FC = () => {
           </BottomNavigation>
         </Paper>
 
-
         {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
         <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
-          <Container sx={{ padding: 0, margin: 0 }}>
+          <Container sx={{ padding: 0, mt: 0, mb: 0, mr: 'auto', ml: 'auto' }}>
             <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
             <MessageAlert
               open={msgOpen}

frontend/src/index.css

@@ -18,7 +18,7 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
   /* スクロールバーのレイアウトシフトを防止 */
   scrollbar-gutter: stable both-edges;
-  overflow: auto
+  overflow: auto;
 }
 
 /* ルート要素のスタイル - Reactアプリケーションのマウントポイント */

frontend/src/pages/RecipeList.tsx

@@ -114,7 +114,7 @@ const RecipeList: React.FC = () => {
                   <ListItemSecondaryAction>
                     
                     {recipe.maxServings ?
-                      <Typography variant="body1" component="span" sx={{ marginRight: '1em', color: "mediumaquamarine" }}>
+                      <Typography variant="body1" component="span" sx={{ mr: 0, color: "mediumaquamarine" }}>
                         {recipe.maxServings}人分
                       </Typography>
                     : <></>}
@@ -132,7 +132,7 @@ const RecipeList: React.FC = () => {
                       </Tooltip>
                     }
 
-                    <Tooltip title="編集">
+                    <Tooltip title="編集" sx={{ml: 1}}>
                       <IconButton edge="end" aria-label="編集"
                         onClick={() => {
                           navigate('/addRecipe/' + recipe.recipeId);