Why does the Drawflow canvas not visible in mobile screens when using the tailwind css?

[Aravinda93]

I am using the Drawflow library to design some nodes and everything works fine when using the md screens and lg screens but for some reason, the canvas is not visible when I view small screens such as a mobile view or tablet view by changing the chrome browser view option.

I don't have any styles specific to small screens which hide the element in small screens. Following is the code I have with the Tailwind CSS within my Nuxt 3 application:

<template>
<div class="flex md:h-[90vh] flex-col md:flex-row">
    <div
      class="w-full md:w-2/12 space-y-5 pt-5 rounded-lg items-center border-muted-200 dark:border-slate-700 dark:bg-slate-800 relative border bg-slate-100 transition-all duration-300 shadow-lg p-5 truncate overflow-auto"
    >
      <div
        v-for="n in listNodes"
        :key="n.ID"
        draggable="true"
        :data-node="n.item"
        @dragstart="drag($event, n.name)"
        class="cursor-move text-center px-3 py-3 rounded-2xl bg-[var(--node-bg-color)] truncate"
        :style="`--node-bg-color: ${n.color}`"
      >
        <span>{{ n.name }}</span>
      </div>
    </div>

    <div class="w-3 bg-transparent"></div>

    <div
      class="w-full bg-slate-100 border-muted-200 rounded-lg items-center border-muted-200 dark:border-slate-700 dark:bg-slate-800 relative border transition-all duration-300 shadow-lg"
    >
      <!-- Canvas goes here -->
      <div
        id="drawflow"
        ref="drawflowRef"
        class="w-full h-full border dark:border-slate-500 gridImage bg-slate-100 dark:bg-slate-800"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
      />
    </div>
  </div>
</template>

<script setup>
import Drawflow from "drawflow";
</script>

The following canvas element is not visible on the mobile screen:

 <!-- Canvas goes here -->
      <div
        id="drawflow"
        ref="drawflowRef"
        class="w-full h-full border dark:border-slate-500 gridImage bg-slate-100 dark:bg-slate-800"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
      />

Following are the styles I have:

/* Drawflow canvas styles */
#drawflow {
    @apply [background-size:25px_25px];
  }

.gridImage {
    @apply !bg-[linear-gradient(to_right,_#CBD5E1_1px,_transparent_1px),_linear-gradient(to_bottom,_#CBD5E1_1px,_transparent_1px)] dark:!bg-[linear-gradient(to_right,_#000000,_transparent_1px),_linear-gradient(to_bottom,_#000000_1px,_transparent_1px)];
}

[jerosoler]

Could you provide a code pen or similar? To see the problem live?

[Aravinda93]

@jerosoler Thanks a lot for the response.

I tried checking and found out that the issue is happening due to h-[90vh], removed it and its working as expected. Thanks!!!