feat: side-by-side installer & externals on >1600px

+ resizable info panel via its bottom right corner

src/common/ui/externals.vue

@@ -18,7 +18,7 @@
         <dd v-if="contents" v-text="formatLength(contents, type)" class="ml-2"/>
       </dl>
     </div>
-    <div class="contents pos-rel flex-auto">
+    <div class="contents pos-rel flex-1">
       <img v-if="img" :src="img">
       <vm-code
         class="abs-full"
@@ -131,7 +131,8 @@ export default {
 $outerPadX: 1rem;
 $mainEntryBorder: 6px double;
 .edit-externals {
-  border-top: $mainEntryBorder var(--fill-8);
+  --border: $mainEntryBorder var(--fill-8);
+  border-top: var(--border);
   > .select {
     min-height: 1.25rem;
     max-height: 15vh;

src/confirm/views/app.vue

@@ -70,7 +70,7 @@
       </div>
       <div class="incognito" v-if="info.incognito" v-text="i18n('msgIncognitoChanges')"/>
     </div>
-    <div class="frame-block flex-auto pos-rel">
+    <div class="frame-block flex-1 pos-rel">
       <vm-externals
         v-if="script"
         v-model="script"
@@ -539,6 +539,46 @@ $infoIconSize: 18px;
       }
     }
   }
+  .edit-externals .select {
+    resize: vertical;
+    &[style] {
+      max-height: 80%;
+    }
+  }
+  @media (max-width: 1599px) {
+    >:first-child {
+      min-height: 5em;
+      max-height: 80vh;
+      width: auto !important; // resetting the inline style attribute if the user resized it
+      resize: vertical;
+      overflow-y: auto;
+    }
+  }
+  @media (min-width: 1600px) {
+    flex-direction: row;
+    >:first-child {
+      min-width: 30em;
+      max-width: 80%;
+      width: 40%;
+      height: auto !important; // resetting the inline style attribute if the user resized it
+      resize: horizontal;
+      overflow: hidden;
+    }
+    .info .descr {
+      max-height: 20vh;
+    }
+    .lists {
+      overflow-y: auto;
+      max-height: 75vh;
+    }
+    .lists dd {
+      max-height: 30vh;
+    }
+    .edit-externals {
+      border-top: none;
+      border-left: var(--border);
+    }
+  }
 }
 .confirm-options {
   label {

src/options/views/edit/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="edit frame flex flex-col fixed-full">
-    <div class="edit-header flex mr-1 mr-1c">
+    <div class="edit-header flex mr-1c">
       <nav>
         <div
           v-for="(label, navKey) in navItems" :key="navKey"
@@ -349,6 +349,7 @@ export default {
   &-header {
     align-items: center;
     justify-content: space-between;
+    border-bottom: 1px solid var(--fill-3);
   }
   &-name {
     font-weight: bold;
@@ -371,6 +372,37 @@ export default {
       box-shadow: 0 -1px 1px var(--fill-4);
     }
   }
+  .edit-externals {
+    --border: 0;
+    .select {
+      padding-top: 0.5em;
+      @media (max-width: 1599px) {
+        resize: vertical;
+        &[style*=height] {
+          max-height: 80%;
+        }
+        &[style*=width] {
+          width: auto !important;
+        }
+      }
+    }
+    @media (min-width: 1600px) {
+      flex-direction: row;
+      .select {
+        resize: horizontal;
+        min-width: 15em;
+        width: 30%;
+        max-height: none;
+        border-bottom: none;
+        &[style*=height] {
+          height: auto !important;
+        }
+        &[style*=width] {
+          max-width: 80%;
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {