Элементы сетки исчезают ⇐ CSS

[Anonymous]

Я создаю сетку, и элементы продолжают исчезать, когда экран становится меньше, и не переходят на следующую строку.
вот код page.tsx: >

Код: Выделить всё

import React from "react";
import { DashboardNavBar } from "@/components/dashboardNavBar";
import CreateButton from "@/components/createProject/createButton";
import prismadb from "@/lib/prisma";
import { auth } from "@clerk/nextjs";
import ProjectCard from "@/components/projectCard";

const DashboardPage = async () => {
const { userId } = auth();
const projects = await prismadb.presentation.findMany({
where: {
userId: userId,
},
});
return (





{projects.map((project) => (

))}


);
};

export default DashboardPage;

мой projectCard.tsx:

Код: Выделить всё

"use client";
import React, { useState, useEffect } from "react";

const ProjectCard = () => {
const [background, setBackground] = useState("");
const [code, setCode] = useState("");

const randomElement = () => {
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"];
return array[Math.floor(array.length * Math.random())];
};

const randomColor = () => {
let color = "#";
for (let i = 0; i < 6; i++) {
color += randomElement();
}
return color;
};

const randomAngle = () => {
return Math.floor(360 * Math.random());
};

const generateBackground = () => {
const gradientColor1 = randomColor();
const gradientColor2 = randomColor();
const newBg =
"linear-gradient(" +
randomAngle() +
"deg, " +
gradientColor1 +
", " +
gradientColor2 +
")";
setBackground(newBg);
setCode(newBg);
};

useEffect(() => {
generateBackground(); // Call the function when the component mounts
}, []); // Empty dependency array means it only runs once, on mount

return (
className="w-full h-full mx-5 opacity-40 rounded-3xl"
style={{ background: background }}
>


);
};

export default ProjectCard;

и мой createNutton.tsx:

Код: Выделить всё

"use client";
import axios from "axios";
import { Plus } from "lucide-react";
import React from "react";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { formSchema } from "@/components/createProject/constants";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
} from "@/components/ui/form";
import { Input } from "../ui/input";
import { useState } from "react";
import { Button } from "../ui/button";

const CreateButton = () => {
const [open, setOpen] = useState(false);
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
name: "",
description: "",
},
});

const onSubmit = async (values: z.infer) =>  {
try {
const response = await axios.post("/api/create-project", {
name: values.name,
description: values.description,
});

if (response.status == 200) {
setOpen(false);
form.reset();
}
} catch (err: any) {
console.log(err);
}
};
return (



New



Are you absolutely sure?

This action cannot be undone. This will permanently delete your
account and remove your data from our servers.





 (

Project name




)}
/>
 (

Project Description




)}
/>



Submit






);
};

export default CreateButton;

И я знаю, что все еще не передаю проект в projectCard.
Я попробовал почти все решения, которые смог найти, но ничего не изменилось< /п>

Подробнее здесь: https://stackoverflow.com/questions/783 ... sappearing