Repository navigation
fix: network inspector - fix column resizing behaviour - #1484
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jwajgelt
approved these changes
Aug 26, 2025
jwajgelt
left a comment
jwajgelt
left a comment
Member
There was a problem hiding this comment.
Good catch, and the code also looks fine.
pFornagiel
added a commit
that referenced
this pull request
Sep 24, 2025
### Description This PR introduces changes in styling / user experience as well as minor bug fixes related to network inspector. Changes and fixes related to network inspector: - replaced vscode-elements [Scrollable component](https://vscode-elements.github.io/components/scrollable/) used inside `NetworkLogDetails`, with [OverlayScrollbars React](https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react) due to the fact that `Scrollable` does not support horizontal scrolling and vanilla css does not allow for the scrollbar to overlay the content, which caused visual problems. `OverlayScrollbarsComponent` has been styled to match the `Scrollable` component of vscode-elements for consistency. <img width="464" height="325" alt="Screenshot 2025-09-22 at 17 07 03" src="https://github.com/user-attachments/assets/82ae9608-c4bd-44d5-a417-da9ffc66980e" /> - made styling changes in `HeadersTab` - the content is now padded properly (padding caused visual issues in some of the themes), made the header names and values visually distinct, added coloured Status Code indicator to match the Chrome Devtools <img width="521" height="330" alt="Screenshot 2025-09-22 at 16 32 16" src="https://github.com/user-attachments/assets/837873ef-45cb-454f-8eef-7c21f985c550" /> - bumped version of [vscode-elements](https://github.com/vscode-elements/elements) to introduce official fix for issue described in #1484 - rewritten the `VscodeTableInternalFix` to tackle another issue - due to the incorrect height calculation scrollbar fails to appear as soon as table rows begin to overflow and works only after much more rows are added. The issue and solution is described within component's comments. PR to fix the issue in the original repository is under development. - fixed problem with the chosen Tab in `NetworkLogDetails` resetting to `Headers` whenever user changed the inspected log Apart from changes made to network inspector, styling changes have been introduced to main extension window (Phone Preview), which make the `Dropdown Menus`, `Modals` and `Tooltips` visually consistent with `Context Menu` introduced in #1506 in terms of border and shadow details. The changes are also meant to make the menus distinct from the extension background. These changes have to be discussed due to their impact on visual style of the extension. <img width="400" alt="image" src="https://github.com/user-attachments/assets/26f95c41-8633-4648-aec2-99247560007b" /> <img width="400" alt="Screenshot 2025-09-22 at 17 15 51" src="https://github.com/user-attachments/assets/21ed5b60-deb7-4762-98c0-b4418d3c88f2" /> <img width="400" alt="image" src="https://github.com/user-attachments/assets/c62fbb92-30c8-4fc4-ae26-aa2cfd2256aa" /> <img width="400" alt="image" src="https://github.com/user-attachments/assets/8c2af784-3c0b-45cf-b039-1da373940c45" /> <img width="400" alt="image" src="https://github.com/user-attachments/assets/bdb0ea82-12a7-4ba9-9166-05b0ec493c65" /> ### How Has This Been Tested: Features were tested in local development environment of extension as follows: - open radon-ide/packages/vscode-extension - run the extension locally using Run and Debug menu -> Run Extension - open an application supporting Radon IDE in editor - example of app supporting rotation: radon-ide-test-apps/react-native-80 - run Radon IDE extension panel, launch app on selected device, open network inspector - **use NetworkLogDetails tabs, see if everything behaves correctly** ### How Has This Change Been Documented: Not applicable.
This branch was successfully deployed
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
This PR fixes an issue with network inspector table column resizing behaviour: When user would try to resize the table columns by dragging the column bars and there were no rows present in the table, an error on the frontend would be thrown and the bar would follow users cursor even upon releasing mouse, causing undefined behaviour.
Screen.Recording.2025-08-26.at.10.30.04.mov
This issue is caused by internal workings of vscode-elements library. To resolve the problems:
How Has This Been Tested:
Features were tested in local development environment of extension as follows:
How Has This Change Been Documented:
Not applicable.