Skip to content

fix(reader): stabilize PDF side panel resize - #283

Merged
yicheng47 merged 2 commits into
mainfrom
fix/pdf-sidebar-resize
Jun 16, 2026
Merged

fix(reader): stabilize PDF side panel resize#283
yicheng47 merged 2 commits into
mainfrom
fix/pdf-sidebar-resize

Conversation

@yicheng47

Copy link
Copy Markdown
Owner

Summary

  • Relayout PDF readers when the AI/sidebar changes width, without changing explicit numeric zoom.
  • Make PDF side panel dragging use pointer capture so resize cannot stick after mouse release.
  • Match the reader panel resize affordance and PDF scrollbar styling to the existing reader/sidebar behavior.
  • Preserve the current PDF page row during resize relayouts.

Submodule

Test plan

  • pnpm exec tsc --noEmit
  • pnpm run lint
  • node --check public/foliate-js/pdf-scroll.js
  • node --check public/foliate-js/fixed-layout.js
  • git diff --check
  • git -C public/foliate-js diff --check

@yicheng47

Copy link
Copy Markdown
Owner Author

Review findings:

  1. Medium: resize-dragging is bypassed during PDF panel drag. In src/pages/Reader.tsx:884, the new viewer ResizeObserver calls renderer.relayout() even while the drag handler has set resize-dragging. In the bumped submodule, public/foliate-js/pdf-scroll.js:96 makes relayout() immediately run #layoutAll(), and #layoutAll() still calls onZoom for loaded pages at public/foliate-js/pdf-scroll.js:399. That defeats the drag suppression and can reintroduce PDF resize jank whenever the user pauses mid-drag. Gate relayoutPdf on !renderer.hasAttribute("resize-dragging"), or make relayout() itself respect the attribute and rely on the final removeAttribute render.

Verification:

  • pnpm exec tsc --noEmit passed.
  • pnpm run lint passed with existing warnings.
  • node --check public/foliate-js/pdf-scroll.js passed.
  • node --check public/foliate-js/fixed-layout.js passed.
  • git diff --check origin/main...HEAD passed.
  • git -C public/foliate-js diff --check 4f5f996be43b65c958aadeedc29d5d2e213760c1..f647a4a5cf2cc0757ac8050c40ae4c04453612c7 passed.

@yicheng47

Copy link
Copy Markdown
Owner Author

Addressed the review finding.

Changes:

  • Reader.tsx now skips the PDF resize observer relayout while the renderer has resize-dragging.
  • foliate-js PDF renderers now also make relayout() no-op during resize-dragging, relying on the final removeAttribute render after drag ends.
  • Updated submodule pointer to a3c3902713ed1e0b533152804a94f43640bd504a.

Validation:

  • pnpm exec tsc --noEmit
  • pnpm run lint with existing warnings only
  • node --check public/foliate-js/pdf-scroll.js
  • node --check public/foliate-js/fixed-layout.js
  • git diff --check
  • git -C public/foliate-js diff --check

@yicheng47
yicheng47 merged commit 86abbfd into main Jun 16, 2026
2 checks passed
@yicheng47
yicheng47 deleted the fix/pdf-sidebar-resize branch June 16, 2026 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant