Fix overflow for long info in details view

spring-boot-admin-server-ui/package.json

@@ -25,7 +25,7 @@
     "d3-time": "^1.0.8",
     "event-source-polyfill": "0.0.12",
     "linkifyjs": "^2.1.5",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.5",
     "moment": "^2.20.1",
     "moment-shortformat": "^2.1.0",
     "pretty-bytes": "^4.0.2",
@@ -51,7 +51,7 @@
     "css-hot-loader": "^1.3.6",
     "css-loader": "^0.28.9",
     "css-mqpacker": "^6.0.2",
-    "eslint": "^4.16.0",
+    "eslint": "^4.17.0",
     "eslint-plugin-html": "^4.0.2",
     "eslint-plugin-vue-libs": "^2.1.0",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -65,15 +65,15 @@
     "lodash-webpack-plugin": "^0.11.4",
     "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "postcss-loader": "^2.0.10",
+    "postcss-loader": "^2.1.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.20.1",
     "url-loader": "^0.6.2",
-    "vue-loader": "^14.0.3",
+    "vue-loader": "^14.1.1",
     "vue-svg-loader": "^0.5.0",
     "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.2"
+    "webpack-bundle-analyzer": "^2.10.0"
   },
   "browserslist": [
     "> 2%",

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue

@@ -25,7 +25,7 @@
                     </strong>
                 </div>
             </div>
-            <div class="content" v-if="info">
+            <div class="content info" v-if="info">
                 <table class="table" v-if="!isEmptyInfo">
                     <tr v-for="(value, key) in info" :key="key">
                         <td class="info__key" v-text="key"></td>
@@ -80,7 +80,12 @@
 </script>
 
 <style lang="scss">
-    .info__key {
-        vertical-align: top;
+    .info {
+        overflow: auto;
+
+        &__key {
+            vertical-align: top;
+        }
     }
+
 </style>
\ No newline at end of file

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue

@@ -26,35 +26,35 @@
                 </div>
             </div>
             <div class="columns is-desktop">
-                <div class="column">
+                <div class="column is-half">
                     <details-info v-if="hasInfo" :instance="instance"></details-info>
                 </div>
-                <div class="column">
+                <div class="column is-half">
                     <details-health :instance="instance"></details-health>
                 </div>
             </div>
             <div class="columns is-desktop">
-                <div class="column">
+                <div class="column is-half">
                     <details-process v-if="hasProcess" :instance="instance"></details-process>
                     <details-gc v-if="hasGc" :instance="instance"></details-gc>
                 </div>
-                <div class="column">
+                <div class="column is-half">
                     <details-threads v-if="hasThreads" :instance="instance"></details-threads>
                 </div>
             </div>
             <div class="columns is-desktop">
-                <div class="column">
+                <div class="column is-half">
                     <details-memory v-if="hasMemory" :instance="instance" type="heap"></details-memory>
                 </div>
-                <div class="column">
+                <div class="column is-half">
                     <details-memory v-if="hasMemory" :instance="instance" type="nonheap"></details-memory>
                 </div>
             </div>
             <div class="columns is-desktop">
-                <div class="column">
+                <div class="column is-half">
                     <details-datasources v-if="hasDatasources" :instance="instance"></details-datasources>
                 </div>
-                <div class="column">
+                <div class="column is-half">
                     <details-caches v-if="hasCaches" :instance="instance"></details-caches>
                 </div>
             </div>