diff --git a/editor/public/custom.css b/editor/public/custom.css
index 3629310..5566e2f 100644
--- a/editor/public/custom.css
+++ b/editor/public/custom.css
@@ -315,6 +315,17 @@ textarea.form-control {
     max-height: 115px !important;
 }
 
+.textareaFileDetails textarea.textarea-customstyle {
+    height: 75px !important;
+}
+
+.textareaFileDetails {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    position: relative;
+    padding-right: 15px;
+}
+
 .modal-content .modal-body textarea {
     height: 52px !important;
 }
@@ -427,14 +438,14 @@ h4 {
 
 .icon-example {
     position: absolute;
-    z-index: 9999;
+    z-index: 1;
     right: 19px;
     bottom: 3px;
 }
 .icon-example:after {
     content: url(img/maximize-2.svg);
     position: absolute;
-    z-index: 9999;
+    z-index: 1;
     right: 6px;
     bottom: 3px;
     cursor: pointer;
diff --git a/editor/src/components/FileDetails.vue b/editor/src/components/FileDetails.vue
index 0abadef..770bc68 100644
--- a/editor/src/components/FileDetails.vue
+++ b/editor/src/components/FileDetails.vue
@@ -21,6 +21,14 @@
             <td>Name:</td>
             <td><base-input v-model="doc['name']" class="file-detail-edit"></base-input></td>
         </tr>
+        <tr>
+            <td>Notes:</td>
+            <td>
+                <div class="textareaFileDetails">
+                    <extended-textarea :data_object="doc" data_field="notes" rows="2" id="notes"></extended-textarea>
+                </div>
+            </td>
+        </tr>
         <tr>
             <td>Platform:</td>
             <td>
@@ -36,27 +44,28 @@
 
 <script>
 import { notificationMixin } from '@/mixins/NotificationMixins.js';
+import ExtendedTextarea from '@/components/Inputs/ExtendedTextarea';
 
 export default {
     mixins: [notificationMixin],
     props: {
         filename: {
             type: String,
-            required: true
+            required: true,
         },
         doc: {
             type: Object,
-            required: true
+            required: true,
         },
         platforms: {
             type: Array,
-            required: true
+            required: true,
         },
         showName: {
             type: Boolean,
             required: false,
-            default: true
-        }
+            default: true,
+        },
     },
     methods: {
         platformEventHandler(event) {
@@ -80,8 +89,11 @@ export default {
             if (this.doc.platform.length == 0) {
                 this.notifyDanger('Missing value', 'No value for platform selected. Please select one or more platforms.');
             }
-        }
-    }
+        },
+    },
+    components: {
+        ExtendedTextarea,
+    },
 };
 </script>
 
diff --git a/editor/src/components/Inputs/ApplicableToCollapse.vue b/editor/src/components/Inputs/ApplicableToCollapse.vue
index 15dd978..f5ea966 100644
--- a/editor/src/components/Inputs/ApplicableToCollapse.vue
+++ b/editor/src/components/Inputs/ApplicableToCollapse.vue
@@ -69,7 +69,13 @@
                         </div>
                         <div class="row mt-md-0">
                             <div class="col-md-11">
-                                <extended-textarea :row="row" :id="title + i" :cb_function="editCommentCallback"></extended-textarea>
+                                <extended-textarea
+                                    :data_object="row"
+                                    data_field="comment"
+                                    :id="title + i"
+                                    rows="4"
+                                    :cb_function="editCommentCallback"
+                                ></extended-textarea>
                             </div>
                         </div>
                         <div class="row mt-md-3">
@@ -171,57 +177,57 @@ export default {
             defaultKVKeys: Object.keys(this.emptyObject),
             showHelptextScore: false,
             currentModal: '',
-            commentModal: ''
+            commentModal: '',
         };
     },
     mixins: [notificationMixin, pageDetailMixin],
     props: {
         title: {
             type: String,
-            required: true
+            required: true,
         },
         applicable_to: {
             type: Array,
-            required: true
+            required: true,
         },
         showLocation: {
             type: Boolean,
             required: false,
-            default: true
+            default: true,
         },
         helpText: {
             type: String,
-            required: true
+            required: true,
         },
         scores: {
             type: Array,
-            required: true
+            required: true,
         },
         scoresTooltip: {
             type: Object,
-            required: true
+            required: true,
         },
         defaultScore: {
             type: Number,
-            required: true
+            required: true,
         },
         showAutoGenerated: {
             type: Boolean,
             required: false,
-            default: false
+            default: false,
         },
         emptyScoreEntry: {
             type: Object,
-            required: true
+            required: true,
         },
         helptextScore: {
             type: String,
-            required: true
+            required: true,
         },
         emptyObject: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     components: {
         ListEditor,
@@ -230,7 +236,7 @@ export default {
         ScoreLogbook,
         ScoreSlider,
         Icons,
-        ExtendedTextarea
+        ExtendedTextarea,
     },
     methods: {
         escapeKeyListener: function(evt) {
@@ -329,8 +335,8 @@ export default {
         },
         editCommentCallback(b) {
             this.commentModal = b;
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/editor/src/components/Inputs/ExtendedTextarea.vue b/editor/src/components/Inputs/ExtendedTextarea.vue
index 755ac40..d108f51 100644
--- a/editor/src/components/Inputs/ExtendedTextarea.vue
+++ b/editor/src/components/Inputs/ExtendedTextarea.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <textarea rows="4" placeholder=". . ." class="form-control textarea-border pl-md-3" v-model="row.comment"> </textarea>
+        <textarea
+            :rows="rows"
+            placeholder=". . ."
+            class="form-control textarea-border pl-md-3 textarea-customstyle"
+            v-model="data_object[data_field]"
+        >
+        </textarea>
         <div v-b-modal="'comment-modal-' + id" class="icon-example" @click="callCbFunction('comment-modal-' + id)"></div>
         <b-modal :id="'comment-modal-' + id" dialog-class="modal-edit-small" content-class="modal-dark-mode" hide-footer hide-header no-close-on-esc>
             <div class="row">
@@ -27,7 +33,7 @@
                         rows="50"
                         placeholder=". . ."
                         class="form-control textarea-border textarea-modal pl-md-3"
-                        v-model="row.comment"
+                        v-model="data_object[data_field]"
                     ></textarea>
                 </div>
             </div>
@@ -42,25 +48,33 @@ export default {
     },
     components: {},
     props: {
-        row: {
+        data_object: {
             type: Object,
-            required: true
+            required: true,
+        },
+        data_field: {
+            type: String,
+            required: true,
         },
         id: {
             type: String,
-            required: true
+            required: true,
         },
         cb_function: {
             type: Function,
-            required: false
-        }
+            required: false,
+        },
+        rows: {
+            type: String,
+            required: true,
+        },
     },
     methods: {
         callCbFunction(b) {
             if (this.cb_function != undefined) {
                 this.cb_function(b);
             }
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/editor/src/components/Inputs/ScoreLogbook.vue b/editor/src/components/Inputs/ScoreLogbook.vue
index ec72c3e..9aeb4d7 100644
--- a/editor/src/components/Inputs/ScoreLogbook.vue
+++ b/editor/src/components/Inputs/ScoreLogbook.vue
@@ -60,7 +60,13 @@
                     ></score-slider>
                 </div>
                 <div class="col-md-5">
-                    <extended-textarea :row="v" :id="'modal' + index" :cb_function="cb_function"></extended-textarea>
+                    <extended-textarea
+                        :data_object="v"
+                        data_field="comment"
+                        :id="'modal' + index"
+                        :cb_function="cb_function"
+                        rows="4"
+                    ></extended-textarea>
                 </div>
                 <div v-if="showAutoGenerated" class="col-md-auto">
                     <toggle-button
@@ -99,51 +105,51 @@ export default {
     data() {
         return {
             newScore: this.defaultScore,
-            componentKey: 0
+            componentKey: 0,
         };
     },
     mixins: [notificationMixin],
     props: {
         item: {
             type: Array,
-            required: true
+            required: true,
         },
         scores: {
             type: Array,
-            required: true
+            required: true,
         },
         scoresTooltip: {
             type: Object,
-            required: true
+            required: true,
         },
         defaultScore: {
             type: Number,
-            required: true
+            required: true,
         },
         showAutoGenerated: {
             type: Boolean,
             required: false,
-            default: false
+            default: false,
         },
         modalId: {
             type: String,
-            required: true
+            required: true,
         },
         emptyScoreEntry: {
             type: Object,
-            required: true
+            required: true,
         },
         cb_function: {
             type: Function,
-            required: false
-        }
+            required: false,
+        },
     },
     components: {
         DatePicker,
         ScoreSlider,
         ToggleButton,
         Icons,
-        ExtendedTextarea
+        ExtendedTextarea,
     },
     mounted() {
         this.sortOnDates();
@@ -203,8 +209,8 @@ export default {
         },
         showHelptextScore(event) {
             this.$emit('showHelptextScoreNow', event);
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/editor/src/pages/DataSourceDetail.vue b/editor/src/pages/DataSourceDetail.vue
index 9ea2d11..21e3663 100644
--- a/editor/src/pages/DataSourceDetail.vue
+++ b/editor/src/pages/DataSourceDetail.vue
@@ -54,7 +54,13 @@
         <div class="row mt-md-0">
             <div class="col-md-11 form-group pr-md-2">
                 <label class="card">Comment</label>
-                <extended-textarea :row="dataSource" id="datasource" :cb_function="editCommentCallback"></extended-textarea>
+                <extended-textarea
+                    :data_object="dataSource"
+                    data_field="comment"
+                    id="datasource"
+                    rows="4"
+                    :cb_function="editCommentCallback"
+                ></extended-textarea>
             </div>
         </div>
         <div class="row mt-md-3 col-md-5">
@@ -153,37 +159,37 @@ export default {
                 '2': 'Fair',
                 '3': 'Good',
                 '4': 'Very good',
-                '5': 'Excellent'
+                '5': 'Excellent',
             },
             dataSourceDefaultKeys: Object.keys(constants.YAML_OBJ_DATA_SOURCES),
             dataSourceSuggestionList: dataSources,
             helptextDataQuality: false,
             helptextDataSourceKVPairs: false,
-            commentModal: false
+            commentModal: false,
         };
     },
     mixins: [pageDetailMixin],
     props: {
         dataSource: {
             type: Object,
-            required: true
+            required: true,
         },
         allDataSources: {
             type: Array,
-            required: true
+            required: true,
         },
         dqHelpText: {
             type: String,
-            required: true
+            required: true,
         },
         dsHelpText: {
             type: String,
-            required: true
+            required: true,
         },
         prevDataSourceQuality: {
             type: Array,
-            required: true
-        }
+            required: true,
+        },
     },
     methods: {
         escapeKeyListener: function(evt) {
@@ -217,7 +223,7 @@ export default {
         },
         editCommentCallback(b) {
             this.commentModal = b;
-        }
+        },
     },
     computed: {
         dsEnabled() {
@@ -227,7 +233,7 @@ export default {
                 }
             }
             return false;
-        }
+        },
     },
     components: {
         DatePicker,
@@ -238,7 +244,7 @@ export default {
         AutoSuggestTitle,
         Modal,
         Icons,
-        ExtendedTextarea
-    }
+        ExtendedTextarea,
+    },
 };
 </script>