From f86cc4b38db19b5396a7ee28b16884bada52a3aa Mon Sep 17 00:00:00 2001
From: Tyler Liu <tyler4long@gmail.com>
Date: Sat, 12 Oct 2024 13:52:50 -0700
Subject: [PATCH] Refactor code

---
 src/components/app.tsx     |  2 +-
 src/components/preview.tsx | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/app.tsx b/src/components/app.tsx
index 9e4717c8..a1aa0024 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -8,8 +8,8 @@ import Split from 'split-grid';
 import store, { Store } from '../store';
 import Editor from './editor';
 import Modals from './modals';
-import Toolbar from './toolbar';
 import Preview from './preview';
+import Toolbar from './toolbar';
 
 const main = async () => {
   // load preferences
diff --git a/src/components/preview.tsx b/src/components/preview.tsx
index 2ea52005..445bdc99 100644
--- a/src/components/preview.tsx
+++ b/src/components/preview.tsx
@@ -1,16 +1,13 @@
 import { auto } from 'manate/react';
 import React, { useEffect } from 'react';
-import $ from 'jquery';
 
 const Preview = auto(() => {
   useEffect(() => {
     // scroll past end
-    $('article#preview').css(
-      'padding-bottom',
-      $('#left-panel').height() -
-        parseInt($('article#preview').css('line-height'), 10) +
-        'px',
-    );
+    const preview = document.querySelector('#preview') as HTMLElement;
+    const leftPanel = document.querySelector('#left-panel') as HTMLElement;
+    const lineHeight = parseInt(getComputedStyle(preview).lineHeight, 10);
+    preview.style.paddingBottom = `${leftPanel.offsetHeight - lineHeight}px`;
 
     // todo: precisely set the timing
     setTimeout(() => {