why does my server crash on mobile phones in production?

Question

I have this route here and in development and in prod on desktop it works just fine. but on phones it crashes. i tried everything. Am I missing something. Heres the route

import React from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import PropertyCard from "./components/PropertyCard";
import { getProperties } from "../server/property";

export default async function immobilien() {
  const properties = await getProperties();
  return (
    <div>
      <div>
        <Navbar />
      </div>
      <div className="m-5">
        <div>
          <h1 className="font-sans text-4xl font-semibold">Immobilien</h1>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 my-5">
          {properties.map((property) => (
            <div>
              <PropertyCard property={property} />
            </div>
          ))}
        </div>
      </div>
      <div>
        <Footer />
      </div>
    </div>
  );
}

that is the server function:

export async function getProperties() {
    try {
        const properties = await prisma1.property.findMany({
            orderBy: {
                id: 'asc',
            },
            //cacheStrategy: {swr: 60, ttl: 30},
        });

        return properties ?? "";
    } catch (error) {
        console.log('getProperties error', error);
        return [];
    }
}

and that is the propertyCard component:

"use client";

import React from "react";

export default function PropertyCard({ property }) {
  return (
    <div>
      <div className="card lg:card-side bg-base-100 shadow-xl h-auto max-h-screen">
        <figure>
          <img
            src={`https://myimmobucket.s3.eu-central-1.amazonaws.com/${property.property_images[0]}`}
            alt="Album"
          />
        </figure>
        <div className="card-body text-center">
          <h2 className="card-title">{property.description}</h2>
          <p>{property.price ? `${property.price} €` : "Preis auf Anfrage"}</p>
          <p>{property.town ? property.town : "Ort auf Anfrage"}</p>
          <p>
            {property.living_space
              ? `${property.living_space} qm Wohnfläche`
              : "Wohnfläche nicht angegeben"}
          </p>
          <p>
            {property.property_size
              ? `${property.property_size} qm Grundstücksfläche`
              : "Grundstücksfläche nicht angegeben"}
          </p>
          <p></p>
          {/* You can open the modal using document.getElementById('ID').showModal() method */}
          <button
            className="btn btn-primary"
            onClick={() =>
              document
                .getElementById(`property_modal_${property.id}`)
                .showModal()
            }
          >
            Zusätzliche Informationen
          </button>
          <dialog id={`property_modal_${property.id}`} className="modal">
            <div className="modal-box !max-w-5xl text-center">
              <form method="dialog">
                {/* if there is a button in form, it will close the modal */}
                <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
                  ✕
                </button>
              </form>
              <div className="carousel w-full my-5">
                {property.property_images.map((image) => (
                  <div
                    id={`image_${image}`}
                    className="carousel-item w-full"
                    key={image}
                  >
                    <img
                      src={`https://myimmobucket.s3.eu-central-1.amazonaws.com/${image}`}
                      className="w-auto rounded-lg h-auto"
                    />
                  </div>
                ))}
              </div>

              <h3 className="font-bold text-lg">{property.description}</h3>
              <p>{property.price ? `${property.price} €` : ""}</p>
              <p>{property.town ? property.town : ""}</p>
              <p>
                {property.living_space
                  ? `${property.living_space} qm Wohnfläche`
                  : ""}
              </p>
              <p>{property.rooms ? `${property.rooms} Zimmer` : ""}</p>
              <p>
                {property.bathrooms ? `${property.bathrooms} Badezimmer` : ""}
              </p>
              <p>{property.parking ? `${property.parking} Parkplätze` : ""}</p>
              <p style={{ whiteSpace: "pre-line" }}>
                {property.renovation_changes ? property.renovation_changes : ""}
              </p>
              <p style={{ whiteSpace: "pre-line" }}>
                {property.additional_information
                  ? property.additional_information
                  : ""}
              </p>
            </div>
          </dialog>
        </div>
      </div>
    </div>
  );
}

I canceled out the PropertyCard component and then it worked. But what is the problem? I implemented it the same way in another project just using an api call. I checked for any possible errors but I can't find any.