style(connections):fix some styles

src/components/KeyValueEditor.vue

@@ -7,20 +7,24 @@
     <div class="editor-row" :style="{ 'max-height': maxHeight }">
       <div v-for="(item, index) in dataList" class="editor-row" :key="index">
         <el-input
+          :ref="`KeyRef${index}`"
           placeholder="Key"
           size="mini"
           type="textarea"
-          autosize
+          resize="none"
+          :autosize="{ minRows: 1, maxRows: 3 }"
           :disabled="disabled"
           v-model="item.key"
           class="input-prop user-prop-key"
           @input="handleInputChange"
         />
         <el-input
+          :ref="`ValueRef${index}`"
           placeholder="Value"
           size="mini"
           type="textarea"
-          autosize
+          resize="none"
+          :autosize="{ minRows: 1, maxRows: 3 }"
           :disabled="disabled"
           v-model="item.value"
           class="input-prop user-prop-value"
@@ -113,8 +117,33 @@ export default class KeyValueEditor extends Vue {
     })
   }
 
+  private resizeInput() {
+    interface ResizeTextarea {
+      resizeTextarea: () => void
+    }
+    this.dataList.forEach((_, i) => {
+      if (this.$refs[`ValueRef${i}`]) {
+        const valueRef = this.$refs[`ValueRef${i}`]
+        if (Array.isArray(valueRef)) {
+          ;(valueRef[0] as unknown as ResizeTextarea).resizeTextarea()
+        }
+      }
+      if (this.$refs[`KeyRef${i}`]) {
+        const keyRef = this.$refs[`KeyRef${i}`]
+        if (Array.isArray(keyRef)) {
+          ;(keyRef[0] as unknown as ResizeTextarea).resizeTextarea()
+        }
+      }
+    })
+  }
+
   private created() {
     this.processObjToArry()
+    window.addEventListener('resize', this.resizeInput)
+  }
+
+  private beforeDestroy() {
+    window.removeEventListener('resize', this.resizeInput)
   }
 }
 </script>
@@ -135,17 +164,20 @@ export default class KeyValueEditor extends Vue {
     .editor-row {
       overflow: hidden;
       display: flex;
-      justify-content: space-between;
-      align-items: center;
       &:not(:last-child) {
         margin-bottom: 10px;
       }
       .input-prop {
         padding: 0px;
         margin-right: 10px;
         textarea {
+          padding: 4px 15px;
           background: transparent;
           border-radius: 4px;
+          overflow-y: hidden;
+          &:hover {
+            overflow-y: overlay;
+          }
         }
       }
     }

src/components/SubscriptionsList.vue

@@ -727,7 +727,10 @@ export default class SubscriptionsList extends Vue {
     padding: 6px 16px;
     height: 100%;
     overflow-x: hidden;
-    overflow-y: overlay;
+    overflow-y: hidden;
+    &:hover {
+      overflow-y: overlay;
+    }
     .topics-item {
       cursor: pointer;
       color: var(--color-text-title);

src/views/connections/ConnectionsList.vue

@@ -750,6 +750,10 @@ export default class ConnectionsList extends Vue {
   }
   .connections-list {
     height: calc(100% - 59px);
+    overflow-y: hidden;
+    &:hover {
+      overflow-y: overlay;
+    }
     .connections-list-skeleton {
       margin: 0 16px;
     }