From c138887c1f7613bce44b99d22b63e2d744b0fb40 Mon Sep 17 00:00:00 2001
From: Aditi <aditisingh1400@gmail.com>
Date: Wed, 25 Jun 2025 19:59:25 +0530
Subject: [PATCH] Make horizontal padding relative to device width

The fixed -400px horizontal offset used by
scrollIntoView led to horizontal scroll only moving
part-way right on narrow screens. The highlights near
the right-edge remained party or completely off
screen.

This centres the highlighted match on any viewport width while
clamping the left margin to 20-400px. On very narrow screens
the scrollbar now moves all the way to the right instead of
stopping midway.
---
 test/integration/find_spec.mjs | 28 ++++++++++++++++++++++++++++
 web/pdf_find_controller.js     |  4 +---
 web/ui_utils.js                |  9 ++++++++-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/test/integration/find_spec.mjs b/test/integration/find_spec.mjs
index cfcd13635..91ea589cc 100644
--- a/test/integration/find_spec.mjs
+++ b/test/integration/find_spec.mjs
@@ -149,4 +149,32 @@ describe("find bar", () => {
       );
     });
   });
+
+  describe("scrolls to the search result text for smaller viewports", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait("tracemonkey.pdf", ".textLayer", 100);
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must scroll to the search result text", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          // Set a smaller viewport to simulate a mobile device
+          await page.setViewport({ width: 350, height: 600 });
+          await page.click("#viewFindButton");
+          await page.waitForSelector("#findInput", { visible: true });
+          await page.type("#findInput", "productivity");
+
+          const highlight = await page.waitForSelector(".textLayer .highlight");
+
+          expect(await highlight.isIntersectingViewport()).toBeTrue();
+        })
+      );
+    });
+  });
 });
diff --git a/web/pdf_find_controller.js b/web/pdf_find_controller.js
index 7a34117e9..3bcdbcbfa 100644
--- a/web/pdf_find_controller.js
+++ b/web/pdf_find_controller.js
@@ -29,7 +29,6 @@ const FindState = {
 
 const FIND_TIMEOUT = 250; // ms
 const MATCH_SCROLL_OFFSET_TOP = -50; // px
-const MATCH_SCROLL_OFFSET_LEFT = -400; // px
 
 const CHARACTERS_TO_NORMALIZE = {
   "\u2010": "-", // Hyphen
@@ -566,10 +565,9 @@ class PDFFindController {
       return;
     }
     this._scrollMatches = false; // Ensure that scrolling only happens once.
-
     const spot = {
       top: MATCH_SCROLL_OFFSET_TOP,
-      left: selectedLeft + MATCH_SCROLL_OFFSET_LEFT,
+      left: selectedLeft,
     };
     scrollIntoView(element, spot, /* scrollMatches = */ true);
   }
diff --git a/web/ui_utils.js b/web/ui_utils.js
index 99c4ff58a..7a0c99d47 100644
--- a/web/ui_utils.js
+++ b/web/ui_utils.js
@@ -120,7 +120,14 @@ function scrollIntoView(element, spot, scrollMatches = false) {
       offsetY += spot.top;
     }
     if (spot.left !== undefined) {
-      offsetX += spot.left;
+      const elementWidth = element.getBoundingClientRect().width;
+      const padding = MathClamp(
+        (parent.clientWidth - elementWidth) / 2,
+        20,
+        400
+      );
+      const left = spot.left - padding;
+      offsetX += left;
       parent.scrollLeft = offsetX;
     }
   }