starred/documenso

Fork 0

mirror of https://github.com/documenso/documenso.git synced 2026-04-25 13:55:59 +03:00

[PR #1803] [CLOSED] fix: long text box not wrapping #1859

New issue

Closed

opened 2026-02-26 20:31:23 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 20:31:23 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/documenso/documenso/pull/1803
Author: @divyaswormakai
Created: 5/19/2025
Status: ❌ Closed

Base: main ← Head: fix/issue-1589-text-boxes-wrap-issue

📝 Commits (6)

ec56821 fix: bypass react component lifecycle to fix width of the react pdf canvas
5a37fa1 Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue
08955d2 Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue
a0caafa Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue
e8b97e8 Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue
67efc05 Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue

📊 Changes

1 file changed (+16 additions, -5 deletions)

View changed files

📝 packages/ui/primitives/pdf-viewer.tsx (+16 -5)

📄 Description

name: Fix- Long Text boxes not wrapping
about: Due to react lifecycle and react PDF, when the

Description

The text boxes were not wrapping and as a result the pdf initially took any amount of width required to show the text boxes in the pdf, causing scrolling issue and a bad user experience.

This is due to react component lifecycle, when the page initially renders, and react-pdf is called for rendering, the canvas it generates in the pdf doesn't consider the width of parent of the body of the webpage. It renders as big of space as is requires to showcase the textboxes.

Fixes #1589

Changes Made

We have a function that fixes this with resize but immediately calling the function doesn't work due to the event loop calling this function before rendering. So a setTimeout has been introduced so that they are visible only when the fix is done.

Testing Performed

Manual testing done for visual aid and have a video recording for such.

This is the before clip:

https://github.com/user-attachments/assets/45727086-4700-4599-ba08-2e17ce13d3f5

After the current changes have been made:

https://github.com/user-attachments/assets/2967d7a1-bc7b-4b57-a057-ba6d32e4448c

Checklist

I have tested these changes locally and they work as expected.
I have updated the documentation to reflect these changes, if applicable.
I have followed the project's coding style guidelines.
I have addressed the code review feedback from the previous submission, if applicable.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/documenso/documenso/pull/1803 **Author:** [@divyaswormakai](https://github.com/divyaswormakai) **Created:** 5/19/2025 **Status:** ❌ Closed **Base:** `main` ← **Head:** `fix/issue-1589-text-boxes-wrap-issue` --- ### 📝 Commits (6) - [`ec56821`](https://github.com/documenso/documenso/commit/ec568215c65a96fdb8a5b8a357ee6805368606dc) fix: bypass react component lifecycle to fix width of the react pdf canvas - [`5a37fa1`](https://github.com/documenso/documenso/commit/5a37fa1c0b78d07e4197837913c45e7f9d216293) Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue - [`08955d2`](https://github.com/documenso/documenso/commit/08955d2dd8e24d630806aae777fa11131111f620) Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue - [`a0caafa`](https://github.com/documenso/documenso/commit/a0caafa2da23daef02be4c53564574edc5fd9ced) Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue - [`e8b97e8`](https://github.com/documenso/documenso/commit/e8b97e8403694332896b4171a3b3bc42682612cf) Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue - [`67efc05`](https://github.com/documenso/documenso/commit/67efc056edb258bebda27fd06400a7e019ba4c54) Merge branch 'main' into fix/issue-1589-text-boxes-wrap-issue ### 📊 Changes **1 file changed** (+16 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `packages/ui/primitives/pdf-viewer.tsx` (+16 -5) </details> ### 📄 Description --- name: Fix- Long Text boxes not wrapping about: Due to react lifecycle and react PDF, when the --- ## Description The text boxes were not wrapping and as a result the pdf initially took any amount of width required to show the text boxes in the pdf, causing scrolling issue and a bad user experience. This is due to react component lifecycle, when the page initially renders, and react-pdf is called for rendering, the canvas it generates in the pdf doesn't consider the width of parent of the body of the webpage. It renders as big of space as is requires to showcase the textboxes. ## Related Issue Fixes #1589 ## Changes Made We have a function that fixes this with resize but immediately calling the function doesn't work due to the event loop calling this function before rendering. So a setTimeout has been introduced so that they are visible only when the fix is done. ## Testing Performed - Manual testing done for visual aid and have a video recording for such. This is the before clip: https://github.com/user-attachments/assets/45727086-4700-4599-ba08-2e17ce13d3f5 After the current changes have been made: https://github.com/user-attachments/assets/2967d7a1-bc7b-4b57-a057-ba6d32e4448c ## Checklist - [x] I have tested these changes locally and they work as expected. - [x] I have updated the documentation to reflect these changes, if applicable. - [x] I have followed the project's coding style guidelines. - [x] I have addressed the code review feedback from the previous submission, if applicable. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem

2026-02-26 20:31:23 +03:00

closed this issue
added the
pull-request
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/documenso#1859

No description provided.

Rows
Columns