merge master

css/base.css

@@ -1621,6 +1621,7 @@ img.channel {
   background-color: rgba(255,255,255,0.90);
 }
 
+
 #image-preview-caption-panel {
   display: flex;
   justify-content: space-between;
@@ -1669,6 +1670,15 @@ img.channel {
   font-size: 6rem;
 }
 
+#image-preview-container .doc-card {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  background-color: #ccc;
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+
 /* Video-call related styles */
 
 #video-container {

src/widgets/doc-preview.jsx

@@ -51,7 +51,7 @@ export default class DocPreview extends React.PureComponent {
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container">
-          <div className="flex-column narrow">
+          <div className="doc-card">
             <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
             <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
               description="Label for a file name" /></b> {shortenFileName(this.props.content.name, 24) || '-'}</div>

umd/index.dev.js

@@ -18150,7 +18150,7 @@ class DocPreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
     }, "close"))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "image-preview-container"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "flex-column narrow"
+      className: "doc-card"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons gray"
     }, iconFromMime(this.props.content.type)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {