chore(SHJS-XXXX): Removed scroll bogging and removed calc in css file

src/App.css

@@ -1,11 +1,21 @@
-html, body { width: 100vw; height: 100vh;}
+* {
+  box-sizing: border-box;
+}
+
+html, body { 
+  width: 100vw; 
+  min-height: 100vh;
+}
 
 #root {
-  width: 100vw; height: 100vh;
+  width: 100vw; 
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content 1fr;
   padding: 0;
   text-align: center;
   box-sizing: border-box;
-  display: block;
 }
 
 .App {
@@ -24,15 +34,15 @@ th {
   top: 0;
   width: 100vw;
   max-width: 100%;
-  position: sticky;
+  position: sticky; 
   box-shadow: 0 -5px 15px 0 #ced4da;
   background: white;
   z-index: 10;
 }
 
 .page {
-  width: calc(100vw - 10px);
-  height: calc(100vh - 35px) !important;
+  width: 100%;
+  height: 100%;
   padding: 5px;
   max-width: 100%;
   display: flex;
@@ -49,4 +59,4 @@ td, th { padding-left: 2px; padding-right: 2px; }
   overflow: auto;
   width: 100%;
   height: 100%;
-}
+}

src/App.tsx

@@ -333,7 +333,7 @@ function App() {
 
             </div></Panel>
             <PanelResizeHandle style={{ width: "2px", backgroundColor: "#EEEEEE" }} />
-            <Panel><div className="overflow" style={{textAlign: "left", marginTop: "13px", marginLeft: "10px", marginBottom: "13px"}}>
+            <Panel><div className="overflow" style={{textAlign: "left", marginTop: "13px", marginLeft: "10px", marginBottom: "13px", "paddingBottom": "12px"}}>
 
               {/* inspector */}
               <b>Message</b>