Pwa display fullscreen test

assets/css/tailwind.css

@@ -25,15 +25,26 @@
   }
 }
 
-*::-webkit-scrollbar {
+.scrollbar-styled::-webkit-scrollbar {
     width: 10px;
 }
 
-*::-webkit-scrollbar-track {
-    background-color: var(--color-neutral-800);
+.scrollbar-styled::-webkit-scrollbar-track {
+    background-color: transparent;
 }
 
-*::-webkit-scrollbar-thumb {
+.scrollbar-styled::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background-color: var(--color-neutral-600);
+}
+
+@utility scrollbar-hidden {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  & { 
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
 }

components/Page/index.vue

@@ -35,7 +35,11 @@ const pageFitImageClass = computed(() => {
 </script>
 
 <template>
-  <img v-if="src && loaded" :src="src" :class="['m-auto', pageFitImageClass]" />
+  <img
+    v-if="src && loaded"
+    :src="src"
+    :class="['m-auto my-[-0.01px]', pageFitImageClass]"
+  />
   <div v-else class="flex items-center justify-center">
     <p class="text-lg text-white">Loading...</p>
   </div>

components/Reader/Horizontal.vue

@@ -67,7 +67,7 @@ onBeforeUnmount(() => {
 
 <template>
   <PageSelector />
-  <div class="h-full w-full overflow-y-auto" @click="onClick">
+  <div class="scrollbar-styled h-full w-full overflow-y-auto" @click="onClick">
     <Page
       :src="currentSrc && providersStore.loadedImages[currentSrc]"
       :page-fit="settings.pageFit"

components/Reader/Vertical.vue

@@ -38,13 +38,14 @@ function onScroll(e: Event) {
 </script>
 
 <template>
-  <div class="h-screen w-full overflow-y-auto" @scroll="onScroll">
+  <div class="scrollbar-styled w-full md:overflow-y-auto" @scroll="onScroll">
     <Page
       v-for="(image, idx) in progress.source?.images"
       :data-idx="idx"
       :src="image"
       :loaded="true"
       :page-fit="settings.pageFit"
+      @contextmenu.prevent
     />
   </div>
 </template>

components/Reader/index.vue

@@ -15,9 +15,15 @@ watchEffect(load);
 
 <template>
   <div
-    class="align-start relative flex h-screen max-w-screen grow bg-black select-none"
+    class="align-start md:scrollbar-styled relative scrollbar-hidden flex grow flex-col bg-black select-none md:h-screen md:max-w-screen"
   >
     <ReaderVertical v-if="settings.readDirection == 'vertical'" />
     <ReaderHorizontal v-else />
+    <footer
+      class="inline-block w-full items-center gap-0 bg-neutral-800 text-stone-200 md:hidden"
+      v-if="settings.readDirection == 'vertical'"
+    >
+      <ChapterSelector />
+    </footer>
   </div>
 </template>

nuxt.config.ts

@@ -25,7 +25,7 @@ export default defineNuxtConfig({
     registerType: "autoUpdate",
     manifest: {
       name: "Rida",
-      display: "standalone",
+      display: "fullscreen",
       short_name: "Rida",
       description: "An intuitive manga reader",
       theme_color: "#0a0a0a",