Fix find widget alignment #5741
Merged
Conversation
This file contains hidden or 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
dosubot
bot
added
the
size:M
✅ Deploy Preview for continuedev canceled.
|
RomneyDa
commented
May 20, 2025
|
|
||
| // Triggers that should cause results to temporarily disappear and then reload | ||
| // Active = LLM is generating, etc. | ||
| const active = useAppSelector((state) => state.session.isStreaming); | ||
|
|
||
| useEffect(() => { | ||
| if (active || isResizing) setMatches([]); | ||
| else refreshSearch("none"); | ||
| }, [refreshSearch, active]); | ||
| else setTimeout(() => refreshSearch("none"), 300); // this gives plenty of time for resizing to finish |
There was a problem hiding this comment.
After a delay for codeblocks etc to render, recalculate search
There was a problem hiding this comment.
This will occasionally cause flake. Why is the timeout needed?
| rect.top + | ||
| searchContainer.clientTop + | ||
| searchContainer.scrollTop - | ||
| headerHeight; |
There was a problem hiding this comment.
this is the main fix - account for header height in result y offset
…allin/find-widget-alignment
|
What are the alignment issues? This is what it looks like for me, is that correct? 
(Some before / after screenshots would be helpful) |
| }; | ||
| }, [searchRef.current]); | ||
| }, [searchRef, headerRef]); | ||
|
|
||
| // Main function for finding matches and generating highlight overlays | ||
| const refreshSearch = useCallback( |
There was a problem hiding this comment.
refreshSearch is large and complicated as is and useFindWidget is 500 lines long. How about moving this function of FindWidget body?
Suggested change
| const refreshSearch = useCallback( | |
| const refreshSearch = useCallback(someNewFunction({ | |
| headerRef, | |
| searchRef, | |
| debouncedInput, | |
| scrollToMatch, | |
| caseSensitive, | |
| useRegex, | |
| }, | |
| [ | |
| headerRef, | |
| searchRef, | |
| debouncedInput, | |
| scrollToMatch, | |
| caseSensitive, | |
| useRegex, | |
| ...dependencies, | |
| ], | |
| ) |
|
@tomasz-stefaniak the issue is with alignment of results, not the widget itself. |
…allin/find-widget-alignment
dosubot
bot
added
size:XL
tomasz-stefaniak
approved these changes
May 24, 2025
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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 find widget match alignment issues caused by tabs by giving the tabs a ref and then passing it to the find widget to account for its height when calculating positions.