file note layout tweaks

src/public/javascripts/widgets/detail/note_detail_file.js

@@ -6,39 +6,51 @@ import TabAwareWidget from "../tab_aware_widget.js";
 
 const TPL = `
 <div class="note-detail-file note-detail-component">
+    <style>
+    .note-detail-file {
+        padding: 10px;
+    }
+    
+    .file-table th, .file-table td {
+        padding: 10px;
+        font-size: larger;
+    }
+
+    .file-preview-content {
+        background-color: var(--accented-background-color);
+        padding: 15px;
+        max-height: 300px;
+        overflow: auto;
+        margin: 10px;
+    }
+    </style>
+
     <table class="file-table">
         <tr>
-            <th>Note ID:</th>
+            <th nowrap>Note ID:</th>
             <td class="file-note-id"></td>
         </tr>
         <tr>
-            <th>Original file name:</th>
+            <th nowrap>Original file name:</th>
             <td class="file-filename"></td>
         </tr>
         <tr>
-            <th>File type:</th>
+            <th nowrap>File type:</th>
             <td class="file-filetype"></td>
         </tr>
         <tr>
-            <th>File size:</th>
+            <th nowrap>File size:</th>
             <td class="file-filesize"></td>
         </tr>
-        <tr class="file-preview-row">
-            <th>Preview:</th>
-            <td>
+    </table>
+    
     <pre class="file-preview-content"></pre>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2">
+
     <button class="file-download btn btn-sm btn-primary" type="button">Download</button>
     &nbsp;
     <button class="file-open btn btn-sm btn-primary" type="button">Open</button>
     &nbsp;
     <button class="file-upload-new-revision btn btn-sm btn-primary">Upload new revision</button>
-            </td>
-        </tr>
-    </table>
 
     <input type="file" class="file-upload-new-revision-input" style="display: none">
 </div>`;
@@ -50,7 +62,6 @@ class NoteDetailFile extends TabAwareWidget{
         this.$fileName = this.$widget.find(".file-filename");
         this.$fileType = this.$widget.find(".file-filetype");
         this.$fileSize = this.$widget.find(".file-filesize");
-        this.$previewRow = this.$widget.find(".file-preview-row");
         this.$previewContent = this.$widget.find(".file-preview-content");
         this.$downloadButton = this.$widget.find(".file-download");
         this.$openButton = this.$widget.find(".file-open");
@@ -116,11 +127,11 @@ class NoteDetailFile extends TabAwareWidget{
         this.$fileType.text(this.tabContext.note.mime);
 
         if (this.tabContext.note.content) {
-            this.$previewRow.show();
+            this.$previewContent.show();
             this.$previewContent.text(this.tabContext.note.content);
         }
         else {
-            this.$previewRow.hide();
+            this.$previewContent.empty().hide();
         }
 
         // open doesn't work for protected notes since it works through browser which isn't in protected session

src/public/javascripts/widgets/promoted_attributes.js

@@ -79,6 +79,10 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
             // we replace the whole content in one step so there can't be any race conditions
             // (previously we saw promoted attributes doubling)
             this.$container.empty().append($tbody);
+            this.$widget.show();
+        }
+        else {
+            this.$widget.hide();
         }
 
         return attributes;

src/public/stylesheets/style.css

@@ -353,11 +353,6 @@ div.ui-tooltip {
     background-color: #eeeeee
 }
 
-.file-table th, .file-table td {
-    padding: 10px;
-    font-size: larger;
-}
-
 #sql-console-query {
     height: 150px;
     width: 100%;
@@ -440,14 +435,6 @@ pre:not(.CodeMirror-line) {
     white-space: pre-wrap;
 }
 
-.file-preview-content {
-    background-color: var(--accented-background-color);
-    padding: 15px;
-    max-width: 600px;
-    max-height: 300px;
-    overflow: auto;
-}
-
 .pointer {
     cursor: pointer;
 }