Fix & improve EventImage thumbnail sizes

TODO.md

@@ -49,7 +49,6 @@
 ## Issues
 
 - load_past raise
-- Room pane slightly overlaps chat at small width
 - invisible uploaded mxc images?
 - first undecryptable message
 - Join button 502

src/gui/Pages/Chat/Timeline/EventContent.qml

@@ -43,7 +43,7 @@ HRowLayout {
         ) :
         0
 
-    // 600px max with a 16px font
+    // ~600px max with a 16px font
     readonly property int maxMessageWidth: theme.fontSize.normal * 0.5 * 75
 
 
@@ -85,6 +85,8 @@ HRowLayout {
 
     HColumnLayout {
         id: contentColumn
+
+        Layout.fillWidth: true
         Layout.alignment: Qt.AlignVCenter
 
         HSelectableLabel {
@@ -185,9 +187,8 @@ HRowLayout {
                 transform: Translate { x: xOffset }
 
                 Layout.bottomMargin: pureMedia ? 0 : contentLabel.bottomPadding
-                Layout.leftMargin: pureMedia ? 0 : contentLabel.leftPadding
+                Layout.leftMargin: pureMedia ? 0 : eventContent.spacing
-                Layout.rightMargin: pureMedia ? 0 : contentLabel.rightPadding
+                Layout.rightMargin: pureMedia ? 0 : eventContent.spacing
-
                 Layout.preferredWidth: item ? item.width : -1
                 Layout.preferredHeight: item ? item.height : -1
             }

src/gui/Pages/Chat/Timeline/EventImage.qml

@@ -25,7 +25,7 @@ HMxcImage {
     readonly property bool isEncrypted: ! utils.isEmptyObject(cryptDict)
 
     readonly property real maxHeight:
-        theme.chat.message.thumbnailMaxHeightRatio
+        eventList.height * theme.chat.message.thumbnailMaxHeightRatio
 
     readonly property size fitSize: utils.fitSize(
         // Minimum display size
@@ -49,10 +49,12 @@ HMxcImage {
 
         // Maximum display size
         Math.min(
-            eventList.height * maxHeight,
+            Math.max(maxHeight, theme.chat.message.thumbnailMinSize.width),
-            eventContent.maxMessageWidth * Math.min(1, theme.uiScale), // XXX
+            pureMedia ? Infinity : eventContent.maxMessageWidth,
+            eventDelegate.width - eventContent.spacing - avatarWrapper.width -
+            eventContent.spacing * 2,  // padding
         ),
-        eventList.height * maxHeight,
+        Math.max(maxHeight, theme.chat.message.thumbnailMinSize.height),
     )
 
 

src/gui/Utils.qml

@@ -187,11 +187,11 @@ QtObject {
 
     function fitSize(minWidth, minHeight, width, height, maxWidth, maxHeight) {
         if (width >= height) {
-            let new_width = Math.max(Math.min(width, maxWidth), minWidth)
+            let new_width = Math.min(Math.max(width, minWidth), maxWidth)
             return Qt.size(new_width, height / (width / new_width))
         }
 
-        let new_height = Math.max(Math.min(height, maxHeight), minHeight)
+        let new_height = Math.min(Math.max(height, minHeight), maxHeight)
         return Qt.size(width / (height / new_height), new_height)
     }
 

src/themes/Default.qpl

@@ -365,11 +365,11 @@ chat:
 
         // Don't scale down thumbnails below this size in pixels, if
         // the becomes too small to show it at normal size.
-        size thumbnailMinSize: Qt.size(192 * uiScale, 192 * uiScale)
+        size thumbnailMinSize: Qt.size(256 * uiScale, 256 * uiScale)
 
         // How much of the chat height thumbnails can take at most,
-        // by default 0.3 for 30%.
+        // by default 0.4 for 40%.
-        real thumbnailMaxHeightRatio: 0.3 * Math.min(1, uiScale)
+        real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale)
 
     daybreak:
         color background: colors.strongBackground