about the css of node

[tansonkk]

it have a problem about the css, the height and width will fetch from database, but the width is wrong and height is right.

<VueFlow style="height: 70vh;" v-model="elementList" :snap-grid="[50, 50]" :snap-to-grid="true">
  <template #node-resizable="props">
    <div v-if="props.data.showOnFloorPlan">

      <ResizeRotateNode v-bind="props" :rotatable="false" v-on:resize="onResize" :key="props.id"
        :style="{ height: props.height + 'px', width: props.width + 'px' }">
        <div class="p-0 m-0 bg-light text-dark border border-black rounded">
          <div style="padding: 3px">name : {{ props.label }}</div>
          <div style="padding: 3px">type : {{ props.data.tableType }}</div>
          <div style="padding: 3px">status : {{ props.data.status }}</div>
          <button class="sticky-bottom w-50 rounded" @click="toTeleport(props)" :id="props.id">pending</button>
          <button class="sticky-bottom w-50 rounded" @click="showUpdateForm(props)" :id="props.id">edit </button>
        </div>
      </ResizeRotateNode>
    </div>
    <teleport v-else to="#port">
      <!-- <teleport v-else-if="(!props.data.showOnFloorPlan) && (props.data.floorId === selectedFloor.value)" to="#port"> -->
      <div v-bind="props" :rotatable="false" :key="props.id"
        class="border border-success position-relative h-100 m-2 rounded">
        <div style="padding: 3px">name : {{ props.label }}</div>
        <div style="padding: 3px">floor : {{ props.data.floorName }}</div>
        <div style="padding: 3px">type : {{ props.data.tableType }}</div>
        <div style="padding: 3px">status : {{ props.data.status }}</div>
        <div style="padding: 3px">floorId : {{ props.data.floorId }}</div>



        <button @click="toTeleport(props)" :id="props.id" class="sticky-bottom w-100">to floor plan
        </button>
        <button class="sticky-bottom w-100 rounded " @click="showUpdateForm(props)" :id="props.id">edit </button>
      </div>
    </teleport>
  </template>
  <Background variant="lines" gap="50" height="100" width="100" />
</VueFlow>

 const newTableList = list.map((table) => ({
      id: table._id,
      type: "resizable",
      label: table.name,
      position: { x: table.posX, y: table.posY },
      height: table.height,
      width: table.width,
      data: { floorName: findFloorName(table.floorId), floorId: table.floorId, tableName: table.name, tableType: table.type, status: table.status, showOnFloorPlan: true, remarks: table.remarks }
    }))
    elementList.value = newTableList

[bcakmakoglu]

I'm not sure what I'm supposed to deduce from the screenshot here?
It looks to me like everything is fine 🤔