fix(webapp): ensure record content doesn't squeeze subname, fixes #848

www/webapp/src/components/Field/RecordItem.vue

@@ -129,6 +129,7 @@ export default {
       }
       mirror = createMirror(el);
       mirror.style.paddingTop = '0px';
+      mirror.style.whiteSpace = 'pre';
       mirror.className = 'mirror-input'
       el.after(mirror);
       let label = el.getElementsByClassName("v-label")[0];

www/webapp/src/components/Field/RecordList.vue

@@ -1,24 +1,26 @@
 <template>
   <div>
-    <table style="border-spacing: 0; width: 100%">
-      <component
-              :is="getRecordComponentName(type)"
-              v-for="(item, index) in value"
-              :key="index"
-              :content="item"
-              :error-messages="errorMessages[index] ? errorMessages[index].content : []"
-              :hide-label="index > 0"
-              :append-icon="value.length > 1 ? mdiClose : ''"
-              :disabled="disabled"
-              :readonly="readonly"
-              :required="required"
-              ref="inputFields"
-              @update:content="$set(value, index, $event)"
-              @input.native="$emit('dirty', $event)"
-              @remove="(e) => removeHandler(index, e)"
-              @keyup="(e) => $emit('keyup', e)"
-      />
-    </table>
+    <div style="overflow: auto hidden; padding-bottom: 1px; width: 100%">
+      <table style="border-spacing: 0; width: 100%">
+        <component
+                :is="getRecordComponentName(type)"
+                v-for="(item, index) in value"
+                :key="index"
+                :content="item"
+                :error-messages="errorMessages[index] ? errorMessages[index].content : []"
+                :hide-label="index > 0"
+                :append-icon="value.length > 1 ? mdiClose : ''"
+                :disabled="disabled"
+                :readonly="readonly"
+                :required="required"
+                ref="inputFields"
+                @update:content="$set(value, index, $event)"
+                @input.native="$emit('dirty', $event)"
+                @remove="(e) => removeHandler(index, e)"
+                @keyup="(e) => $emit('keyup', e)"
+        />
+      </table>
+    </div>
     <v-btn
             @click="addHandler"
             class="px-0 text-none"
@@ -160,6 +162,6 @@ export default {
 </script>
 <style scoped>
 table >>> td:last-child {
-  width: 100%;
+  padding-right: 4px;
 }
 </style>

www/webapp/src/views/CrudListRecord.vue

@@ -134,7 +134,15 @@ export default {
     >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:not(:last-child).v-data-table__mobile-table-row > td:last-child {
         border-bottom-width: 4px;
     }
-
+    >>> .theme--light.v-data-table > .v-data-table__wrapper > table {
+      width: 100%;
+    }
+    @media screen and (min-width: 600px) {
+      >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3),
+      >>> .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr > td:nth-child(3) > div{
+        width: 45vw;
+      }
+    }
     >>> tr.successFade td {
         animation: successFade 1s;
     }

www/webapp/src/views/DomainSetup.vue

@@ -82,7 +82,7 @@
           </v-row>
         </v-card-title>
         <v-divider></v-divider>
-        <v-card-text style="overflow-x: scroll; overflow-y: hidden" v-if="ds.length">
+        <v-card-text v-if="ds.length">
           <record-list readonly type="DS" :value="ds"></record-list>
         </v-card-text>
         <v-alert type="error" v-else>Parameters could not be retrieved. (Are you logged in?)</v-alert>
@@ -102,7 +102,7 @@
           </v-row>
         </v-card-title>
         <v-divider></v-divider>
-        <v-card-text style="overflow-x: scroll; overflow-y: hidden" v-if="dnskey.length">
+        <v-card-text v-if="dnskey.length">
           <record-list readonly type="DNSKEY" :value="dnskey"></record-list>
         </v-card-text>
         <v-alert type="error" v-else>Parameters could not be retrieved. (Are you logged in?)</v-alert>
@@ -213,17 +213,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.caption {
-  text-transform: uppercase;
-}
-
-.code, .fixed-width {
-  font-family: monospace;
-}
-
-pre {
-  overflow: auto;
-}
-</style>