fix: Dashboard Edit View Tab Headers Hidden when Dashboard Name is Long #19472
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
Gwitchr
reviewed
Mar 31, 2022
Comment on lines
+265
to
+282
| useEffect(() => { | ||
| setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0); | ||
|
|
||
| let observer: ResizeObserver; | ||
| if (typeof global.ResizeObserver !== 'undefined' && headerRef.current) { | ||
| observer = new ResizeObserver(entries => { | ||
| setBarTopOffset( | ||
| current => entries?.[0]?.contentRect?.height || current, | ||
| ); | ||
| }); | ||
|
|
||
| observer.observe(headerRef.current); | ||
| } | ||
|
|
||
| return () => { | ||
| observer?.disconnect(); | ||
| }; | ||
| }, []); |
Codecov Report
@@ Coverage Diff @@
## master #19472 +/- ##
==========================================
- Coverage 66.48% 66.42% -0.07%
==========================================
Files 1670 1673 +3
Lines 63968 64055 +87
Branches 6512 6519 +7
==========================================
+ Hits 42531 42547 +16
- Misses 19748 19817 +69
- Partials 1689 1691 +2
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
philipher29
pushed a commit
to ValtechMobility/superset
that referenced
this pull request
Jun 9, 2022
mistercrunch
added
🏷️ bot
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.
SUMMARY
The dashboard edit view get's cut off (hidden behind) when the dashboard header is bigger than usual.
This can happen if the dashboard title occupies more than one line, making the header bigger, or when editing the title.
The reason is because the edit view is sticky, and the top is hardcoded.
This PR calculates the top offset of the edit view based on the dashboard header view, so that it looks correctly regardless of size.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
Screen.Recording.2022-03-31.at.15.10.51.mov
After:
new.mov
TESTING INSTRUCTIONS
Ensure the edit view tabs are still visible.
ADDITIONAL INFORMATION