Height Adjustment for StPageFlip

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>