Merge pull request #20047 from Aditi-1400/fix-horizontal-scroll

calixteman · web-flow · commit fd87e668e092 · 2025-07-03T16:52:15.000+02:00
Make horizontal padding relative to device width
diff --git 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
@@ -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
@@ -573,10 +572,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
@@ -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;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -120,7 +120,14 @@ function scrollIntoView(element, spot, scrollMatches = false) {`
`120`	`120`	`offsetY += spot.top;`
`121`	`121`	`}`
`122`	`122`	`if (spot.left !== undefined) {`
`123`		`- offsetX += spot.left;`
	`123`	`+ const elementWidth = element.getBoundingClientRect().width;`
	`124`	`+ const padding = MathClamp(`
	`125`	`+ (parent.clientWidth - elementWidth) / 2,`
	`126`	`+ 20,`
	`127`	`+ 400`
	`128`	`+ );`
	`129`	`+ const left = spot.left - padding;`
	`130`	`+ offsetX += left;`
`124`	`131`	`parent.scrollLeft = offsetX;`
`125`	`132`	`}`
`126`	`133`	`}`