diff --git a/src/CodeSnippetDisplay.tsx b/src/CodeSnippetDisplay.tsx index bab96f3..e6d6ddb 100644 --- a/src/CodeSnippetDisplay.tsx +++ b/src/CodeSnippetDisplay.tsx @@ -409,7 +409,7 @@ export class CodeSnippetDisplay extends React.Component< const intID = parseInt(id, 10); const realTarget = document.getElementsByClassName(TITLE_CLASS)[intID]; // distDown is the number of pixels to shift the preview down - let distDown: number = realTarget.getBoundingClientRect().top - 40; + let distDown: number = realTarget.getBoundingClientRect().top - 43; if (realTarget.getBoundingClientRect().top > window.screen.height / 2) { distDown = distDown - 66; } diff --git a/src/PreviewSnippet.tsx b/src/PreviewSnippet.tsx index 1a124b5..59d9acc 100644 --- a/src/PreviewSnippet.tsx +++ b/src/PreviewSnippet.tsx @@ -169,7 +169,7 @@ export class Preview extends Widget { }) }); } - this.editor.setSize({ width: 200, height: 106 }); + /*this.editor.setSize({ width: 150, height: 106 });*/ if (this.isVisible) { this._hasRefreshedSinceAttach = true; this.editor.refresh(); diff --git a/style/index.css b/style/index.css index bb5a2f8..1dc0006 100644 --- a/style/index.css +++ b/style/index.css @@ -165,9 +165,10 @@ .jp-codeSnippet-preview-content { background: var(--jp-layout-color1); - padding: 10px; - /* min-width: 960px; */ - width: 200px; + padding: 5px; + width: 180px; + /*height: fit-content; + max-height: 150px;*/ height: 106px; box-sizing: border-box; box-shadow: var(--jp-elevation-z2); @@ -175,7 +176,7 @@ border-radius: var(--jp-border-radius); font-size: var(--jp-ui-font-size1); color: var(--jp-ui-font-color1); - margin: 10px 10px 10px 10px; + margin: 10px 10px 10px 0px; } /* Code Snippet Drag and Drop CSS */ @@ -318,7 +319,7 @@ flex-direction: column; height: 100%; width: 98.5%; - padding: 12px; + padding-left: 12px; } .jp-codeSnippetInputArea-editor { @@ -351,6 +352,7 @@ align-self: flex-end; margin-top: 12px; margin-right: 3%; + margin-bottom: 12px; } /* code snippet create button */