fix: big screen ui and global search worker issue#1534
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR addresses a bug in the big screen/wide screen UI where global search functionality was not working properly. The fix involves consolidating responsive styles and updating the search-in-files worker implementation.
Key Changes:
- Consolidates scattered media queries into a dedicated
wideScreen.scssfile for better organization - Updates the search-in-files worker to use ES module imports instead of webpack entry points
- Improves JSX syntax by replacing empty fragments with conditional rendering
Reviewed Changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Removes searchInFilesWorker webpack entry point |
| src/styles/wideScreen.scss | New file consolidating all wide screen responsive styles |
| src/sidebarApps/searchInFiles/index.js | Updates worker instantiation and improves JSX syntax |
| src/main.js | Imports the new wideScreen.scss file |
| Multiple style files | Removes duplicated media queries now consolidated in wideScreen.scss |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| */ | ||
| function getWorker() { | ||
| return new Worker("./js/build/searchInFilesWorker.build.js"); | ||
| return new Worker(new URL("./worker.js", import.meta.url)); |
There was a problem hiding this comment.
The worker file path may be incorrect. Since the webpack entry for 'searchInFilesWorker' was removed, ensure that './worker.js' exists relative to this file location and contains the expected worker code.
| return new Worker(new URL("./worker.js", import.meta.url)); | |
| // Inline worker code as a string. Replace the code below with the actual worker code from './worker.js'. | |
| const workerCode = ` | |
| self.onmessage = function(e) { | |
| // Worker logic goes here. Replace with actual code from './worker.js'. | |
| // Example: echo received message | |
| self.postMessage(e.data); | |
| }; | |
| `; | |
| const blob = new Blob([workerCode], { type: "application/javascript" }); | |
| const workerUrl = URL.createObjectURL(blob); | |
| return new Worker(workerUrl); |
| } | ||
|
|
||
| folder.listFiles = listFiles; | ||
| addedFolder.push(folder); |
There was a problem hiding this comment.
Moving addedFolder.push(folder) inside the async IIFE may cause timing issues. The folder is now added to the array only after the async operation completes, but other code may expect it to be available immediately after openFolder is called.
| addedFolder.push(folder); |
bajrangCoder
changed the title
| justify-content: space-between; | ||
| align-items: center; | ||
| min-height: 35px; | ||
| min-height: 30px; |
There was a problem hiding this comment.
35px is fine for mobile screen, as with 30 the ui looks busy.
There was a problem hiding this comment.
Also on wide screen , in extension tab there should be gap between icon and the text
There was a problem hiding this comment.
35px is fine for mobile screen, as with 30 the ui looks busy.
For now let it go, because 35px looks odd as parent has height of 30px.
Also on wide screen , in extension tab there should be gap between icon and the text
yes, I'll add some padding
There was a problem hiding this comment.
Either way there's nothing to worry about 😄, May plugins like Better UI live long 🙂
There was a problem hiding this comment.
Either way there's nothing to worry about 😄, May plugins like Better UI live long 🙂
Still default should be good
Changes: