Console: make layout fixed with variablescrollable parts

Console: add column resizer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bx24dev",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Bitrix24 Dev extension",
   "author": "Andrey Neyman <[email protected]>",
   "engines": {

src/app/App.vue

@@ -24,7 +24,10 @@
                     </svg>
                 </a>
             </div>
-            <div class="col-10 pt-3">
+            <div
+                class="col-10 pt-3"
+                :class="contentClass ? [contentClass] : null"
+            >
                 <div class="d-flex">
                     <nav aria-label="breadcrumb" v-if="breadcrumb.length > 0">
                         <ol class="breadcrumb">
@@ -68,6 +71,7 @@ export default {
 
     computed: mapState({
         breadcrumb: state => state.breadcrumb,
+        contentClass: state => state.contentClass,
     }),
 
     async mounted() {
@@ -280,4 +284,13 @@ body .json-formatter-row {
     top: var(--top);
     left: var(--left);
 }
+
+.page-content {
+    &--fixed-height {
+        height: 100vh;
+        display: flex;
+        overflow: auto;
+        flex-flow: column nowrap;
+    }
+}
 </style>

src/app/components/modules/Console/Console.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="flex-grow-1 flex-shrink-1" style="overflow: auto;">
         <Instance
             v-for="instance of instances"
             :key="instance.id"
@@ -94,6 +94,7 @@ export default {
 
     mounted() {
         this.setBreadcrumb(['Консоль']);
+        this.setContentClass('page-content--fixed-height');
         this.add();
         this.initHotkey();
     },
@@ -241,6 +242,7 @@ export default {
 
         ...mapMutations({
             setBreadcrumb: 'setBreadcrumb',
+            setContentClass: 'setContentClass',
         }),
     }
 };