bug: fix recipeCard mobile and MenuNavigationProductList

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss

@@ -20,7 +20,7 @@
             width: 100%;
             height: 100vh;
             position: fixed;
-            z-index: 9999;
+            z-index: 99999999999;
         }
     }
     .menuNavigationProductModal{
@@ -30,7 +30,7 @@
         top: 0;
         width: 100%;
         height: 100vh;
-        z-index: 10000;
+        z-index: 999999999999;
         transform: translateY(100%);
 
         &.animation{

src/components/common/RecipeCard/RecipeCard.module.scss

@@ -4,7 +4,6 @@
     @apply inline-flex flex-col justify-start;
     .image{
         width: 100%;
-        max-height: 22rem;
         border-radius: 2.4rem;
         img {
             border-radius: 2.4rem;
@@ -12,14 +11,20 @@
         &:hover{
             cursor: pointer;
         }
+        @screen md{
+            max-height: 22rem;
+        }
     }
     .title{
         padding: 1.6rem 0.8rem 0.4rem 0.8rem;
-        @apply font-bold;
+        @apply font-bold overflow-hidden overflow-ellipsis ;
         font-size: 2rem;
         line-height: 2.8rem;
         letter-spacing: -0.01em;
         color: var(--text-active);
+         display: -webkit-box;
+        -webkit-line-clamp: 2; /* number of lines to show */
+        -webkit-box-orient: vertical;
         &:hover{
             cursor: pointer;
         }
@@ -30,5 +35,9 @@
         display: -webkit-box;
         -webkit-line-clamp: 3; /* number of lines to show */
         -webkit-box-orient: vertical;
+        margin-bottom: 3rem;
+        @screen md{
+            margin-bottom: 0;
+        }
     }
 }

src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss

@@ -1,11 +1,12 @@
+@import "../../../../styles/_utilities";
 .beadcrumb{
     padding-left: 3.2rem;
     padding-bottom: 3.2rem;
 }
 .image{
+    @apply spacing-horizontal;
     div{
         width: 100%;
-        padding: 0 2rem;
         margin-bottom: 2rem;
         border-radius: 2.4rem;
         min-height: 45.2rem;

src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss

@@ -1,61 +0,0 @@
-@import "../../../../../styles/_utilities";
-
-.recipesItem {
-    @apply flex justify-between;
-    margin: 1.5rem 0;
-
-    @screen md{
-        @apply block;
-    }
-
-    .recipesItemImage {
-        @apply transition-all duration-200;
-        width: 31%;
-        a{
-            div{
-                @apply object-cover;
-                min-height: 19.6rem;
-                border-radius: 1.5rem;
-            }
-        }
-
-        @screen md {
-            @apply object-cover cursor-pointer;
-            width: 100%;
-            margin: 0 auto;
-            img{
-                height:100%;
-                border-radius: 2.4rem;
-            }
-        }
-    }
-    .recipesItemText {
-        width: 65%;
-        .recipesItemName{
-            @apply topline font-bold cursor-pointer;
-
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-             overflow: hidden;
-            -webkit-box-orient: vertical;
-            font-feature-settings: "salt" on;
-            color:var(--text-active);
-            margin-top: 1.6rem;
-            &:hover {
-                color: var(--primary);
-            }
-        }
-        @screen md {
-            width: 100%;
-        }
-    }
-
-    .recipesItemDescription{
-        color:var(--text-label);
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-         overflow: hidden;
-        -webkit-box-orient: vertical;
-    }
- 
-}

src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx

@@ -1,32 +0,0 @@
-import Link from 'next/link';
-import React from 'react';
-import { ImgWithLink } from 'src/components/common';
-import s from './RecipesItem.module.scss';
-interface RecipesItem {
-    image:string,
-    name: string,
-    description:string,
-    link: string
-}
-
-const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
-    return (
-        <div className={s.recipesItem}>
-            <div className={s.recipesItemImage}>
-                <Link href={link}>
-                    <a>
-                        <ImgWithLink src={image} alt="author" />
-                    </a>
-                </Link>
-            </div>
-            <Link href={link}>
-                <a className={s.recipesItemText}>
-                    <div className={s.recipesItemName}>{name}</div>
-                    <div className={s.recipesItemDescription}>{description}</div>
-                </a>
-            </Link>
-        </div >
-    )
-}
-
-export default RecipesItem

src/components/modules/recipes-list/RecipesList/RecipesList.module.scss

@@ -6,6 +6,10 @@
         padding:0 3.2rem;
         padding-bottom:5.6rem;
     }
+    div{
+        max-width: 100%;
+        max-height: 100%;
+    }
     .breadcrumb{
         padding:1rem 0;
     }
@@ -39,11 +43,16 @@
                     @screen md {
                         @apply flex justify-between flex-wrap;
                         margin: 1rem 0;
+                      
                     }
                     .item {
+                        img{
+                            width: 100%;
+                        }
                         @screen md {
                             width: calc(97% / 2);
                             margin-top:1rem;
+                            
                         }
                         @screen lg{
                             width: calc(97% / 3);
@@ -63,7 +72,9 @@
             .boxSelect{
                 @apply flex justify-between w-full;
                 padding: 2.5rem 0;
-           
+                div{
+                    max-width: 17.6rem;
+                }
                 @screen xl {
                     @apply block;
                     width: auto;