Fix #99

src/static/css/dark.css

@@ -229,6 +229,7 @@ a:hover, .btn:hover {
     max-width: 100%;
     max-height: 400px;
     margin: 0 auto 0;
+    width: auto;
     height: auto;
 }
 
@@ -537,3 +538,7 @@ svg {
 .stat > .card-body {
     padding: 0.7em 1.25em;
 }
+
+#modal-body > .img-wrapper {
+    margin-bottom: 1em;
+}

src/static/css/light.css

@@ -417,3 +417,7 @@ mark {
 .stat > .card-body {
     padding: 0.7em 1.25em;
 }
+
+#modal-body > .img-wrapper {
+    margin-bottom: 1em;
+}

src/static/js/dom.js

@@ -197,8 +197,15 @@ function infoButtonCb(hit) {
         getDocumentInfo(hit["_id"]).then(doc => {
             $("#modal-title").text(doc["name"] + ext(hit));
 
+            const mimeCategory = doc["mime"].split("/")[0];
+            const imgWrapper = document.createElement("div");
+            imgWrapper.setAttribute("style", "position: relative");
+            imgWrapper.setAttribute("class", "img-wrapper");
+            makeThumbnail(mimeCategory, hit, imgWrapper, false);
+
             const tbody = $("<tbody>");
             $("#modal-body").empty()
+                .append(imgWrapper)
                 .append($("<table class='table table-sm'>")
                     .append($("<thead>")
                         .append($("<tr>")