Stable layout

lsp-inspector/src/App.vue

@@ -55,16 +55,15 @@ h1, h2, h3, h4 {
 }
 
 .inspector {
-  margin-top: 10px;
+  max-height: 100vh;
+  padding-top: 10px;
+  padding-bottom: 30px;
 }
 .body {
   justify-content: center;
   display: flex;
   max-width: 1100px;
 
-  margin-top: 20px;
-  margin-bottom: 60px;
-
   margin-left: auto;
   margin-right: auto;
 }

lsp-inspector/src/components/Header.vue

@@ -35,9 +35,9 @@ a {
 }
 
 .header {
+  height: 60px;
   max-width: 1100px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto 25px auto;
   display: flex;
   flex-flow: row;
   justify-content: space-between;

lsp-inspector/src/components/message/MessageList.vue

@@ -41,19 +41,18 @@ export default Vue.extend({
   margin-right: auto;
 }
 .msg-header {
+  height: 60px;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
-  margin-bottom: 40px;
   font-size: 2rem;
 }
 .msg-list {
   display: flex;
   flex-flow: column;
-  height: calc(100vh - 300px);
-  padding-top: 20px;
+  height: calc(100vh - 200px);
+  margin-top: 20px;
   overflow: scroll;
   border-top: 2px solid $active-bg;
-  border-bottom: 2px solid $active-bg;
 }
 </style>

lsp-inspector/src/components/sidebar/SideBar.vue

@@ -34,5 +34,7 @@ h3 {
   margin-right: 50px;
   text-align: left;
   font-size: 14px;
+  height: calc(100vh - 120px);
+  overflow-y: scroll;
 }
 </style>

lsp-inspector/src/scss/global.scss

@@ -9,6 +9,14 @@
 
 $monospace: 'Roboto Mono', 'Source Code Pro', 'Input Mono', Menlo, Monaco, 'Courier New', monospace;
 
+/**
+ * Reset
+ */
+
+* {
+  box-sizing: border-box;
+}
+
 /**
  * Var
  */

lsp-inspector/vue.config.js

@@ -6,7 +6,6 @@ const OUTPUT_DIR = process.env.TARGET === 'lsp-website'
   ? 'dist'
   : '../lsp-inspector-webview/dist/src'
 
-
 module.exports = {
   baseUrl: BASEURL,
   devServer: {