fix(cbx-reader): prevent touch drag on mobile and fix header title overflow (#2441)

booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.scss

@@ -8,6 +8,10 @@
   background: #1a1a1a;
   color: #ffffff;
   position: relative;
+  touch-action: none;
+  overscroll-behavior: none;
+  -webkit-user-select: none;
+  user-select: none;
 
   &:focus {
     outline: none;
@@ -267,6 +271,8 @@
       overflow-y: auto;
       overflow-x: hidden;
       align-items: flex-start;
+      touch-action: pan-y;
+      overscroll-behavior: contain;
 
       .infinite-scroll-wrapper {
         display: flex;

booklore-ui/src/app/features/readers/cbx-reader/layout/header/cbx-header.component.scss

@@ -92,10 +92,9 @@
   }
 
   .book-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    max-width: calc(100% - 240px);
+    flex: 1;
+    min-width: 0;
+    padding: 0 12px;
     text-align: center;
     font-size: 14px;
     font-weight: 500;
@@ -105,7 +104,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    min-height: 1.2em;
   }
 }
 
@@ -124,7 +122,6 @@
 
     .book-title {
       font-size: 12px;
-      max-width: calc(100% - 160px);
     }
   }
 }