From 308d5bf87d7d5f1a9efe6dbfd8d6fb9c9ef00bb6 Mon Sep 17 00:00:00 2001
From: ACX <8075870+acx10@users.noreply.github.com>
Date: Fri, 23 Jan 2026 17:48:56 -0700
Subject: [PATCH] fix(cbx-reader): prevent touch drag on mobile and fix header
 title overflow (#2441)

---
 .../readers/cbx-reader/cbx-reader.component.scss         | 6 ++++++
 .../cbx-reader/layout/header/cbx-header.component.scss   | 9 +++------
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.scss b/booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.scss
index b9c59b28a..8905fae3d 100644
--- a/booklore-ui/src/app/features/readers/cbx-reader/cbx-reader.component.scss
+++ b/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;
diff --git a/booklore-ui/src/app/features/readers/cbx-reader/layout/header/cbx-header.component.scss b/booklore-ui/src/app/features/readers/cbx-reader/layout/header/cbx-header.component.scss
index ac75a8110..c9a75d993 100644
--- a/booklore-ui/src/app/features/readers/cbx-reader/layout/header/cbx-header.component.scss
+++ b/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);
     }
   }
 }