fix(viewport): pad width to contentWidth #388
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I have an application that uses the viewport, and I added borders to the viewport. I noticed the width is not set to what can be set through
.Width()
, as I'm loading variable width content, which shrinks and grows depending on what it currently renders.My initial workaround was to force the style from the viewport to set a fixed width. However, that didn't work. Then, I added spaces to the last line of the content to match the viewport's width, which worked, but I believe the end-user code shouldn't be handling this case.
So, with this PR, I'm padding the width of the viewport content to what has been specified in its
width
. Please look at the screenshots from a minimal application reproducing the issue.Before:
![Screenshot from 2023-06-15 10-18-06](https://private-user-images.githubusercontent.com/27286/246188462-6073b261-153d-4d1c-bbc0-d4c3127ff6f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA3NTM5ODgsIm5iZiI6MTcyMDc1MzY4OCwicGF0aCI6Ii8yNzI4Ni8yNDYxODg0NjItNjA3M2IyNjEtMTUzZC00ZDFjLWJiYzAtZDRjMzEyN2ZmNmY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEyVDAzMDgwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ0YjRkZjliYjY1ZTUxMDM3ODVlYzYyOWMyN2E2NzdjNGIxZWIxM2VhNzAxZGUzNjA3YWVkZWI1YTk5MjNlMmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.j1fqkwvwR5zh7m4GncHB0zKBzfLleW2V2ycalA5QVM8)
After:
![Screenshot from 2023-06-15 10-12-56](https://private-user-images.githubusercontent.com/27286/246188513-bcd1241f-9856-4106-8bf3-8c9736e9caf1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA3NTM5ODgsIm5iZiI6MTcyMDc1MzY4OCwicGF0aCI6Ii8yNzI4Ni8yNDYxODg1MTMtYmNkMTI0MWYtOTg1Ni00MTA2LThiZjMtOGM5NzM2ZTljYWYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEyVDAzMDgwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI2NmFmZThmYWRmZDg4OTVkOGY4Mjk2ZjIzY2NmNDE3YTBlZjY0YzZjOTM5OTA1ZDZiNDgzMTM5ZWEzZjU0MzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.90XCsRE93GCsS1hJdda0KTqPKGIJ4XTV_3Q376kMN2E)
And this is the code that reproduces the issue: