From b8f2797abfeb2faa62630cdfff2b376c8ed3ee9f Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sat, 4 Jan 2020 09:04:08 +0100
Subject: [PATCH] better behavior of note info widget in tight width

---
 package-lock.json                           |  2 +-
 src/public/javascripts/widgets/note_info.js | 29 ++++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1906e1c80..da0436f84 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.39.0-beta",
+  "version": "0.39.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/public/javascripts/widgets/note_info.js b/src/public/javascripts/widgets/note_info.js
index 1f71fd03d..db4a30f8c 100644
--- a/src/public/javascripts/widgets/note_info.js
+++ b/src/public/javascripts/widgets/note_info.js
@@ -1,18 +1,18 @@
 import StandardWidget from "./standard_widget.js";
 
 const TPL = `
-<table class="note-info-table">
+<table class="note-info-table" style="table-layout: fixed; width: 100%;">
     <tr>
-        <th>Note ID:</th>
-        <td colspan="3" class="note-info-note-id"></td>
+        <th nowrap>Note ID:</th>
+        <td nowrap colspan="3" class="note-info-note-id"></td>
     </tr>
     <tr>
-        <th>Created:</th>
-        <td colspan="3" class="note-info-date-created"></td>
+        <th nowrap>Created:</th>
+        <td nowrap colspan="3" style="overflow: hidden; text-overflow: ellipsis;" class="note-info-date-created"></td>
     </tr>
     <tr>
-        <th>Modified:</th>
-        <td colspan="3" class="note-info-date-modified"></td>
+        <th nowrap>Modified:</th>
+        <td nowrap colspan="3" style="overflow: hidden; text-overflow: ellipsis;" class="note-info-date-modified"></td>
     </tr>
     <tr>
         <th>Type:</th>
@@ -39,10 +39,19 @@ class NoteInfoWidget extends StandardWidget {
         const note = this.ctx.note;
 
         $noteId.text(note.noteId);
-        $dateCreated.text(note.dateCreated);
-        $dateModified.text(note.dateModified);
+        $dateCreated
+            .text(note.dateCreated)
+            .attr("title", note.dateCreated);
+
+        $dateModified
+            .text(note.dateModified)
+            .attr("title", note.dateCreated);
+
         $type.text(note.type);
-        $mime.text(note.mime).attr("title", note.mime);
+
+        $mime
+            .text(note.mime)
+            .attr("title", note.mime);
     }
 
     eventReceived(name, data) {