fix size and display in phone

index.html

@@ -11,3 +11,13 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+<style>
+    html {
+        background: url("public/background.jpg");
+        background-repeat: no-repeat;
+        background-size: 1000px auto;
+        background-position: center top;
+        background-attachment: fixed;
+        overflow-y: clip;
+    }
+</style>

src/App.vue

@@ -29,5 +29,38 @@
   margin-top: 8px;
   padding: 0 12px;
   overflow-y: scroll;
+  max-height: 620px !important;
 }
+
+body {
+  position: absolute;
+  width: 342px;
+  max-height: 620px !important;
+  top: 118px;
+  left: calc(50% - 174px);
+}
+.v-application__wrap {
+  width: 342px;
+  min-height: 708px !important;
+}
+
+.v-toolbar {
+  border-radius: 36px 36px 0 0 !important;
+  top: 118px !important;
+  left: calc(50% - 174px) !important;
+  width: 342px !important;
+}
+
+.v-application {
+  border-radius: 36px;
+}
+
+.recommandations {
+  position: fixed;
+  bottom: calc(100vh - 825px);
+  width: 342px;
+  left: calc(50% - 174px) !important;
+  border-radius: 0 0 36px 36px  !important;
+}
+
 </style>

src/components/Suggestion.vue

@@ -26,7 +26,7 @@ async function getSimilarBooks() {
     params.collection = true;
   }
 
-  return getBookRecommandations(book.id, params)
+  return getBookRecommandations(book!.id, params)
     .then(result => {
       books.value = result;
     })
@@ -47,7 +47,7 @@ watch(selectedOption, getSimilarBooks)
 </script>
 
 <template>
-  <v-sheet>
+  <v-sheet class="recommandation-books">
     <span class="d-flex ga-1 bg-white pa-2">
       <v-select
         v-model="selectedOption"
@@ -92,7 +92,7 @@ watch(selectedOption, getSimilarBooks)
   </v-sheet>
 </template>
 
-<style>
+<style scoped>
 .v-slide-group__prev, .v-slide-group__next {
   flex-basis: 24px;
   min-width: 24px;

src/pages/BookDetails.vue

@@ -116,7 +116,7 @@ const shouldShowReco = ref(false);
   >
     <v-slide-y-reverse-transition v-if="!isLoading">
       <v-card v-show="shouldShowReco">
-        <Suggestion :book="book!"/>
+        <Suggestion v-if="book" :book="book!"/>
       </v-card>
     </v-slide-y-reverse-transition>
     <v-btn
@@ -143,14 +143,6 @@ const shouldShowReco = ref(false);
   margin-left: calc((100% - 300px) / 2);
 }
 
-.recommandations {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  left: 0
-
-}
-
 section {
   width: 100%;
   display: flex;