NuxtJS Vue 3: V-for breaks page design

I am currently building an anime search portal.
For this I use NuxtJS3 and Serverless Api.

However, when I receive search results from my api and it displays my results with v-for directive , the page’s background is cut off and the rendered elements are “outside” (?) the page. What did I do wrong? Down below is my component and screenshots.

index.vue

//   console.log("doene");

import { ref, onMounted } from "vue";
const searchText = ref("");
const myData = ref([]) as any;
const searchSize = ref(10);
var intervalChecker = ref(true);

onMounted(() => {});

async function searchForAnimes() {
  console.log("BEFORE:", intervalChecker.value);
  if (intervalChecker.value === true) {
    const data = await fetch(`/api/index?search=${searchText.value}`);
    const json = await data.json();
    myData.value = json.results;
    intervalChecker.value = false;
    console.log(searchText.value);
    console.log(json.results);
    console.log("AFTER:", intervalChecker.value);
    setTimeout(() => {
      intervalChecker.value = true;
    }, 7000);
  } else {
    alert("Bitte warte kurz einen Moment...");
  }
}
</script>
  <template>
  <div class="bg">
    <NuxtLayout name="navbar"></NuxtLayout>
    <div class="grid place-items-center h-screen">
      <form id="form" class="input-group flex justify-center mt-2 mb-2" @submit.prevent="searchForAnimes">
        <input
          type="text"
          id="searchInput"
          v-model="searchText"
          placeholder="Type here"
          class="input input-bordered input-primary w-full max-w-xs"
        />
        <button id="formBtn" class="btn btn-primary btn-square">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
        </button>
      </form>

      <div v-for="anime in myData" :key="anime.mal_id">
        <div class="card card-side bg-base-100 shadow-xl m-4">
          <figure>
            <img :src="anime?.image_url" :alt="anime_cover" />
          </figure>
          <div class="card-body">
            <h2 class="card-title">{{ anime?.title }}</h2>
            <p>{{ anime?.synopsis }}</p>
            <div class="card-actions justify-end">
              <button class="btn btn-primary">Watch</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>


<style scoped lang="scss">
.carousel-item {
  width: 15rem !important;
}

.bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

<script lang="ts">
function removeMessage(id) {
  var el = document.getElementById(id);
  if (el.style.display === "none") {
    el.style.visibility = "visible";
    el.classList.add("modal-open");
  } else {
    el.style.visibility = "hidden";
    el.classList.remove("modal-open");
  }
}
</script>