[Redesign] Fix visual issues on narrow screens #8724
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
loic-sharma
commented
Jul 30, 2021
| img { | ||
| max-width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
Previously image overflow was prevented by this:
NuGetGallery/src/Bootstrap/less/theme/common-readme.less
Lines 14 to 32 in 77c5f6e
This code applies to collapsible README views, which is used on upload and manage package pages.
loic-sharma
commented
Jul 30, 2021
| @@ -215,791 +215,808 @@ | |||
| @helper MakeLicenseSpan(CompositeLicenseExpressionSegment segment) {<span>@segment.Value</span>} | |||
|
|
|||
| <section role="main" class="container main-container page-package-details-v2"> | |||
| <div class="row"> | |||
There was a problem hiding this comment.
This is what caused the scrollbar and lack of gutter on small screens. We currently have two Bootstrap rows nested within each other without any columns in the middle:
loic-sharma
changed the title
loic-sharma
changed the title
loic-sharma
commented
Jul 30, 2021
| @@ -414,55 +420,6 @@ | |||
| font-weight: 600; | |||
| text-decoration: underline; | |||
| } | |||
|
|
|||
| .tab-content { | |||
There was a problem hiding this comment.
This is V1 installation instruction styling which isn't used in the redesign.
loic-sharma
force-pushed
the
loshar-overflow
branch
from
2ea892e
to
1e43fe8
Compare
loic-sharma
force-pushed
the
loshar-overflow
branch
from
1e43fe8
to
9cb3615
Compare
joelverhagen
approved these changes
Aug 2, 2021
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.
Fixes a few problems. Addresses #8719
I recommend reviewing without whitespace changes:
1. Prevent README images from overflow.
Before...
After...
2. Fix Bootstrap grid to add gutter and avoid an unnecessary scroll bar
Before...
Notice the scrollbar and the lack of gutter.
After...
3. Improve the installation instructions scrollbar
Before...
Notice the installation instructions do not stretch all the way across.
Notice there is space below the scrollbar.
After...