Skip to content

Commit 13ba5f1

Browse files
committed
Preview height issue fixed.
1 parent 4fbe485 commit 13ba5f1

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

src/CodeSnippetDisplay.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -458,8 +458,18 @@ export class CodeSnippetDisplay extends React.Component<
458458
private _setPreviewPosition(id: string): void {
459459
const intID = parseInt(id, 10);
460460
const realTarget = document.getElementsByClassName(TITLE_CLASS)[intID];
461+
const newTarget = document.getElementsByClassName('jp-codeSnippet-item')[
462+
intID
463+
];
461464
// distDown is the number of pixels to shift the preview down
462465
const distDown: number = realTarget.getBoundingClientRect().top - 43; //this is bumping it up
466+
const elementSnippet = newTarget as HTMLElement;
467+
const heightSnippet = elementSnippet.clientHeight;
468+
const heightPreview = heightSnippet.toString(10) + 'px';
469+
document.documentElement.style.setProperty(
470+
'--preview-max-height',
471+
heightPreview
472+
);
463473
// if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
464474
// distDown = distDown - 66; //this is bumping it up further if it's close to the end of the screen
465475
// }

style/index.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
22
--preview-distance: 0px;
3+
--preview-max-height: 75px;
34
--more-options-top: 0px;
45
--more-options-left: 0px;
56
}
@@ -169,7 +170,7 @@
169170
padding: 5px;
170171
width: 180px;
171172
height: fit-content;
172-
max-height: 75px;
173+
max-height: var(--preview-max-height);
173174
/*height: 106px;*/
174175
box-sizing: border-box;
175176
box-shadow: var(--jp-elevation-z2);

0 commit comments

Comments
 (0)