Fix document viewer sizing up to 200% zoom #886
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
chriswilty
force-pushed
the
doc-viewer-breakpoint
branch
from
bfd87da to
e573bd8
Compare
chriswilty
commented
Apr 2, 2024
| } | ||
|
|
||
| .document-viewer-container { | ||
| flex-grow: 1; | ||
| overflow-y: auto; | ||
| width: 32.5rem; |
There was a problem hiding this comment.
This is to keep the paragraph width consistent in terms of characters per line, regardless of zoom / font size. There could be other approaches, but in any case the fixed aspect ratio wasn't working well.
chriswilty
commented
Apr 2, 2024
| @@ -21,8 +27,23 @@ | |||
| align-self: stretch; | |||
| } | |||
|
|
|||
| .view-documents-nav .button-container > * { | |||
| flex: 1 0 0; | |||
There was a problem hiding this comment.
This makes the buttons the same size, rather than fit-to-text.
dhinrichs-scottlogic
approved these changes
Apr 2, 2024
chriswilty
commented
Apr 2, 2024
| } | ||
|
|
||
| .view-documents-nav .button-container .themed-button-wrapper { | ||
| flex-grow: 2; |
There was a problem hiding this comment.
This gives the buttons twice as much "extra space" as the page number text.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
Document viewer was not useable at higher zoom levels due to a fixed aspect ratio.
These changes address that, and also optimise spacing at higher zoom breakpoints.
Screenshots
110% Zoom (before first breakpoint)
150% Zoom (between first and second breakpoints)
200% Zoom (after second breakpoint)
Checklist
Have you done the following?
Linked the relevant Issueno issue, quick win