fix: prevent sidebar resize handle from overlapping file explorer buttons #8181
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| const helpPaneBody = ( | ||
| <ErrorBoundary> | ||
| <PanelSectionProvider value="sidebar"> | ||
| <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]"> |
There was a problem hiding this comment.
I believe the margin was added because there is some whitespace if not
There was a problem hiding this comment.
yeah, true, but visually it doesn't look bad, do you think we should still try to play with a DOM/CSS structure to try to come up with a better visual solution?
There was a problem hiding this comment.
Is the hitAreaMargins sufficient? If not we can push the buttons further in imo.
yeah, I tested it, for me 2px worked fine, but that was with removed negative margin
There was a problem hiding this comment.
Is the hitAreaMargins sufficient? If not we can push the buttons further in imo.
yeah, I tested it, for me 2px worked fine, but that was with removed negative margin
yeah, I think we can try different options if possible, since it affects other panels too. We've reverted the margin change for now.
maxkoretskyi
force-pushed
the
fix/resize-handle-overlap-5920
branch
from
cfa7f88 to
aee5209
Compare
|
🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.19.10-dev40 |
## 📝 Summary <!-- Provide a concise summary of what this pull request is addressing. If this PR closes any issues, list them here by number (e.g., Closes #123). --> Regression from #8181 There is a visual gap on file explorer, section and headers <img width="224" height="199" alt="image" src="https://github.com/user-attachments/assets/a9e90db5-2730-4f45-8b7a-66ef03f5c133" /> <img width="158" height="80" alt="image" src="https://github.com/user-attachments/assets/a28b6036-cb92-4930-a21f-5704da482682" /> After <img width="152" height="98" alt="image" src="https://github.com/user-attachments/assets/e0457961-ad70-47a0-8f77-39a15bac59ab" /> ## 🔍 Description of Changes <!-- Detail the specific changes made in this pull request. Explain the problem addressed and how it was resolved. If applicable, provide before and after comparisons, screenshots, or any relevant details to help reviewers understand the changes easily. --> ## 📋 Checklist - [x] I have read the [contributor guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md). - [ ] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on [Discord](https://marimo.io/discord?ref=pr), or the community [discussions](https://github.com/marimo-team/marimo/discussions) (Please provide a link if applicable). - [ ] Tests have been added for the changes made. - [ ] Documentation has been updated where applicable, including docstrings for API changes. - [x] Pull request title is a good summary of the changes - it will be used in the [release notes](https://github.com/marimo-team/marimo/releases).
3 participants
📝 Summary
Closes #5920
Description of Changes
The sidebar resize handle's hit area overlapped with the file explorer's three-dot menu button, making it difficult to click "Rename" and other file actions.
Two changes in
frontend/src/components/editor/chrome/wrapper/app-chrome.tsx:Removed
mr-[-4px]negative margin on the sidebar panel body. This margin was pushing the file list content 4px into the resize handle zone, causing the entire handle to sit on top of interactive elements.Reduced
hitAreaMarginsonPanelResizeHandlefrom the library default of{ coarse: 15, fine: 5 }to{ coarse: 15, fine: 2 }. Thefinevalue controls the invisible hit area for mouse pointers — reducing it from 5px to 2px keeps the resize cursor from appearing too far from the actual panel edge. Thecoarsevalue (touch devices) is kept at the default since larger touch targets are needed there.Checklist