Fix mobile styles

src/App.css

@@ -12,6 +12,6 @@ nav {
 }
 
 main {
-  width: min(1200px, 100% - 4rem);
+  max-width: 1600px;
   margin-inline: auto;
 }

src/components/Landing.tsx

@@ -8,7 +8,7 @@ const cleanParams = (params: string) => params.replace(/%20/g, " ");
 
 const Landing = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const { recipes, error, loading } = useRecipes(0, searchParams.get("ingredients"), true);
+  const { recipes, error, loading } = useRecipes(0, searchParams.get("ingredients") ?? "", true);
   const [searchValue, setSearchValue] = useState(cleanParams(searchParams.get("ingredients") ?? ""));
 
   if (error) {

src/hooks/useRecipes.ts

@@ -9,13 +9,13 @@ const options = {
 	}
 };
 
-const useRecipes = (from: number = 0, ingredients:string|null = null, realData: boolean = false) => {
+const useRecipes = (from: number = 0, ingredients:string = "", realData: boolean = false) => {
   const [recipes, setRecipes] = useState(fakeRecipes);
   const [error, setError] = useState<Error|null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const url = `https://tasty.p.rapidapi.com/recipes/list?from=${from}&size=20&q=${ingredients}`;
+    const url = `https://tasty.p.rapidapi.com/recipes/list?from=${from}&size=20${ingredients ? "&q=" + ingredients : ""}`;
     const getRecipes = async () => {
       if (!realData) {
         console.log(`FakeFetch URL: ${url}`)

src/styles/Landing.module.css

@@ -13,5 +13,5 @@
 .recipes {
   margin-top: 1rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
 }

src/styles/Recipe.module.css

@@ -1,6 +1,8 @@
 .page {
+  width: min(1200px, 100% - 4rem);
+
   img {
-    max-width: 400px;
+    max-width: 360px;
     object-fit: cover;
     border-radius: 0.5rem;
   }
@@ -48,7 +50,14 @@
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 1100px) and (min-width: 730px) {
+  .categories {
+    overflow-y: auto;
+    max-height: 300px;
+  }
+}
+
+@media (max-width: 729px) {
   .page > h1 {
     font-size: 1.25rem;
     margin-bottom: 1rem;
@@ -62,6 +71,7 @@
     flex-wrap: nowrap;
     overflow-x: auto;
     max-width: 100vw;
+    padding: 0 1rem;
   }
 
   .description {