data explorer: convert to code UI update #8829
Conversation
|
E2E Tests 🚀 |
| .code-syntax-heading { | ||
| margin-block-start: 0; | ||
| margin-block-end: 8px; | ||
| margin: 0 0 0 0; | ||
| } |
There was a problem hiding this comment.
I don't think you want to set margin and margin-block here together. The margin-block properties will set the margin (margin-top, margin-bottom, margin-left, and margin-right) values for you based off the writing mode/text orientation.
You are also resetting the margin bottom value from 8px to 0px with margin: 0 0 0 0; which I don't think you want. You can notice in the screenshot above that there is no margin between the dropdown header and syntax dropdown.
If you want to use margin instead of margin-block, the equivalent would be:
.code-syntax-heading {
margin-top: 0;
margin-bottom: 8px;
}
There was a problem hiding this comment.
ah, that makes sense! updated to only have margin top and bottom 👍
src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.tsx
Outdated
Show resolved
Hide resolved
| .convert-to-code-editor { | ||
| height: 200px; | ||
| width: 100%; | ||
| border: 1px solid var(--vscode-positronModalDialog-border); | ||
| } |
There was a problem hiding this comment.
I noticed that the text in the code editor doesn't have any padding which makes it squished up against the border. I wonder if we could get some padding around the text?
There was a problem hiding this comment.
Okay, I added a bit of padding! Unfortunately, now it looks like whole inner square of the CodeEditorWidget was moved 😭
There was a problem hiding this comment.
ah ya, that makes sense since the text content is nested deeper in the CodeEditorWidget. We probably need to find the div the text is contained in and add the padding there.
| > | ||
| <VerticalStack> | ||
| <ContentArea> |
There was a problem hiding this comment.
I don't know if this is reproducible for you, but I am able to scroll the entire contents of the modal by a few pixels to the left and right but there's no scrollbar showing up.
Screen.Recording.2025-08-05.at.1.39.48.PM.mov
There was a problem hiding this comment.
There is an invisible scrollbar in the CodeEditorWidget, but adjusting the width to be slightly smaller removed the wiggliness in the modal. There's definitely something weird going on with the sizing, it seems like the element is not actually the size of the border (see the padding comment/image)?
There was a problem hiding this comment.
I'll see if I can poke around and figure out what is going and how we can fix these issues!
…alDialog.tsx Co-authored-by: Dhruvi Sompura <[email protected]> Signed-off-by: Isabel Zimmerman <[email protected]>
|
alright, this is the current state of the modal! we'll apply a "real" code formatter in a follow up. for now, this just wraps onto the next line. 
|
src/vs/workbench/browser/positronModalDialogs/convertToCodeModalDialog.css
Show resolved
Hide resolved
Signed-off-by: Isabel Zimmerman <[email protected]>
UI updates to the "Convert to Code" button!
Release Notes
New Features
Bug Fixes
QA Notes
with the
"dataExplorer.convertToCode": truesettingand then click on the
Convert to Codebutton. See syntax highlighting.