fix: auto-scrolling on form pages, layout issues #2927
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
Fixing PR containers#2863 has exposed issues with all of the 'child form pages': - build/pull/run image - play kube - deploy pod - create pod from container Prior to the change these pages were all reliant on scrolling to exist somewhere external and the entire page would scroll. Although it often looked poor in some cases you could always get to the content. Now that we have fixed page headers and no automatic scrolling, these pages need to declare which div to autoscroll on. While fixing this I found that two screens had prior scrolling/display issues, and controls would appear 'outside' of the background panel or partially hidden offscreen. Although they're not directly related it made sense to fix them here so that I could confirm the correct scrolling behaviour: DeployPodToKube - The h-1/3 was causing the height calculation to be wrong and the Deploy button was often hanging off the bottom of the panel. Use a fixed height for the editor instead. PodCreateFromContainers - The minimum width would force unnecessary scrollbars when the window was narrow, and float-right left the Close and Create Pod buttons hanging off the bottom of the panel. Signed-off-by: Tim deBoer <git@tdeboer.ca>
deboer-tim
requested review from
jeffmaury and
cdrage
and removed request for
a team
benoitf
reviewed
Jun 19, 2023
|
Yeah, I was starting to think the same thing. I removed the 'unplanned scrollbars' but now every page needs to say 'auto-scroll this bit'. I think the solution is the same as what I did in SettingsPage: the NavPage should just have autoscroll on the content area. |
Moves overflow-auto 'up' to the NavPage so that all child content automatically scrolls as necessary. Moved top of search bar padding to bottom of title - this helps child pages without search so that there is a little padding under the title (when scrolling the content doesn't look like it hits the title). Most child content divs require 'min-w-full and h-fit' so that the form stays full width but only as large vertically as necessary, made this consistent. Signed-off-by: Tim deBoer <git@tdeboer.ca>
|
Implemented this. Had to add a few missing |
benoitf
reviewed
Jun 19, 2023
| @@ -46,6 +46,8 @@ export let searchEnabled = true; | |||
| </div> | |||
| {/if} | |||
|
|
|||
| <slot name="content" /> | |||
| <div class="flex w-full h-full overflow-auto"> | |||
There was a problem hiding this comment.
It looks better to put it there 👍
benoitf
approved these changes
Jun 19, 2023
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.
What does this PR do?
Fixing PR #2863 has exposed issues with all of the 'child form pages':
Prior to the change these pages were all reliant on scrolling to exist somewhere external and the entire page would scroll. Although it looked poor in some cases you could always get to the content. Now that we have fixed page headers and no automatic scrolling, these pages need to declare which div to autoscroll on.
While fixing this I found that two screens had prior scrolling/display issues, and controls would appear 'outside' of the background panel or partially hidden offscreen. Although they're not directly related it made sense to fix them here so that I could confirm the correct scrolling behaviour:
DeployPodToKube - The h-1/3 was causing the height calculation to be wrong and the Deploy button
was often hanging off the bottom of the panel. Use a fixed height for the editor instead.
PodCreateFromContainers - The minimum width would force unnecessary scrollbars when the window
was narrow, and float-right left the Close and Create Pod buttons hanging off the bottom of
the panel.
Screenshot/screencast of this PR
1.1 - scrollbars generally work, but on some pages always visible/not working right:
Since #2863 - broken, no scroll: :(
After:
What issues does this PR fix or reference?
N/A
How to test this PR?
Open up each page and resize the window too big or too small.