Allow resizing the attachment preview panel

Closes #13234

sao/CHANGELOG

@@ -1,3 +1,4 @@
+* Allow resizing the attachment preview panel
 * Set focus on search entry after search
 * Support language suffix in CSV export
 * Close tab with mouse middle click

sao/src/sao.less

@@ -553,11 +553,24 @@ img.icon {
     border-width: 0 0 0 1px;
     flex: 1;
     margin-left: 5px;
-    min-width: 20%;
-    overflow: auto;
+    overflow: unset;
 
-    > div {
-        flex: 1;
+    > div.preview-resizer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        max-width: 100vw;
+        min-width: 100%;
+        overflow: hidden;
+        resize: inline;
+        transform: scaleX(-1);
+
+        > div.preview-resizer-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            transform: scaleX(-1);
+        }
     }
 }
 
@@ -569,6 +582,9 @@ img.icon {
     .attachment-preview:not(:empty) {
         border-width: 0 0 1px 0;
         margin-bottom: 5px;
+        > div.preview-resizer {
+            resize: none;
+        }
     }
 }
 

sao/src/tab.js

@@ -1286,11 +1286,14 @@
         },
         _attachment_preview_el: function() {
             var el = jQuery('<div/>', {
-                'class': 'text-center',
+                'class': 'preview-resizer',
             });
-            var buttons = jQuery('<div/>', {
-                'class': 'btn-group',
+            var content = jQuery('<div/>', {
+                'class': 'preview-resizer-content',
             }).appendTo(el);
+            var buttons = jQuery('<div/>', {
+                'class': 'btn-group center-block',
+            }).appendTo(content);
 
             var but_prev = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
@@ -1342,7 +1345,7 @@
             screen.windows.push(preview);
 
             screen.switch_view().done(function() {
-                el.append(screen.screen_container.el);
+                content.append(screen.screen_container.el);
             });
             return el;
         },