feat(ui): expandable inventory editor

web/src/components/EditDialog.vue

@@ -8,7 +8,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
     v-model="dialog"
     :max-width="maxWidth || 400"
     persistent
-    :fullscreen="fullscreen"
+    :fullscreen="expandable && fullscreen"
     :transition="false"
     :content-class="'item-dialog item-dialog--' + position"
   >
@@ -21,7 +21,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
 
         <v-spacer></v-spacer>
 
-        <v-btn icon @click="toggleFullscreen()" class="mr-3">
+        <v-btn icon @click="toggleFullscreen()" class="mr-3" v-if="expandable">
           <v-icon>mdi-arrow-{{ fullscreen ? 'collapse' : 'expand' }}</v-icon>
         </v-btn>
 
@@ -89,6 +89,10 @@ export default {
     cancelButtonText: String,
     saveButtonText: String,
     expandable: Boolean,
+    name: {
+      type: String,
+      default: 'Unnamed',
+    },
   },
 
   data() {

web/src/components/InventoryForm.vue

@@ -9,7 +9,8 @@
       :value="formError"
       color="error"
       class="pb-2"
-    >{{ formError }}</v-alert>
+    >{{ formError }}
+    </v-alert>
 
     <v-text-field
       v-model="item.name"
@@ -72,6 +73,10 @@
     ></v-select>
 
     <codemirror
+      :class="{
+        'vue-codemirror--static': item.type === 'static',
+        'vue-codemirror--static-yaml': item.type === 'static-yaml',
+      }"
       :style="{ border: '1px solid lightgray' }"
       v-model.trim="item.inventory"
       :options="cmOptions"
@@ -113,6 +118,14 @@
 .CodeMirror {
   height: 160px !important;
 }
+
+.v-dialog--fullscreen .vue-codemirror--static .CodeMirror {
+  height: calc(100vh - 540px) !important;
+}
+
+.v-dialog--fullscreen .vue-codemirror--static-yaml .CodeMirror {
+  height: calc(100vh - 600px) !important;
+}
 </style>
 <script>
 /* eslint-disable import/no-extraneous-dependencies,import/extensions */

web/src/components/TaskLogView.vue

@@ -7,7 +7,7 @@
     >{{ item.message }}
     </v-alert>
 
-    <v-container class="pa-0 mb-2 overflow-auto">
+    <v-container fluid class="pa-0 mb-2 overflow-auto">
       <v-row no-gutters class="flex-nowrap">
         <v-col>
           <v-list two-line subheader class="pa-0">

web/src/views/project/Environment.vue

@@ -51,6 +51,7 @@
       hide-default-footer
       class="mt-4"
       :items-per-page="Number.MAX_VALUE"
+      style="max-width: 800px;"
     >
       <template v-slot:item.actions="{ item }">
         <div style="white-space: nowrap">

web/src/views/project/Inventory.vue

@@ -1,6 +1,7 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="items != null">
     <EditDialog
+      expandable
       v-model="editDialog"
       :save-button-text="itemId === 'new' ? $t('create') : $t('save')"
       :icon="getAppIcon(itemApp)"

web/src/views/project/TemplateView.vue

@@ -94,7 +94,7 @@
       </v-btn>
     </v-toolbar>
 
-    <v-container>
+    <v-container fluid>
       <v-alert
         text
         type="info"
@@ -105,7 +105,7 @@
 
       <v-row>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-book-play</v-icon>
@@ -119,7 +119,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>{{ TEMPLATE_TYPE_ICONS[item.type] }}</v-icon>
@@ -134,7 +134,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-monitor</v-icon>
@@ -150,7 +150,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-code-braces</v-icon>
@@ -165,7 +165,7 @@
           </v-list>
         </v-col>
         <v-col>
-          <v-list subheader dense>
+          <v-list subheader>
             <v-list-item>
               <v-list-item-icon>
                 <v-icon>mdi-git</v-icon>