From 21b5cd056edb9c7f84bfc8a1eea9db46b66796d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Commaille?= <zecakeh@tedomum.fr>
Date: Mon, 21 Apr 2025 10:04:48 +0200
Subject: [PATCH] room-history: Make sure there is enough space for overlays on
 small media

---
 data/resources/stylesheet/_room_history.scss  | 30 ++++++++++++++-----
 .../room_history/message_row/visual_media.rs  | 20 +++++++++----
 .../room_history/message_row/visual_media.ui  | 11 +++++--
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/data/resources/stylesheet/_room_history.scss b/data/resources/stylesheet/_room_history.scss
index 1e12063f..1738e089 100644
--- a/data/resources/stylesheet/_room_history.scss
+++ b/data/resources/stylesheet/_room_history.scss
@@ -270,14 +270,18 @@ state-group-row.room-history-row {
     background-color: var(--border-color);
   }
 
-  .instructions {
+  > .overlaid {
+    margin: 6px;
+  }
+
+  > .instructions {
     padding: 12px;
     border-radius: vendor.$menu_radius;
   }
 
   // Copied from .osd button style in https://gitlab.gnome.org/GNOME/libadwaita/-/blob/main/src/stylesheet/widgets/_buttons.scss
   &.has-placeholder {
-    .instructions {
+    > .instructions {
       color: vendor.$osd_fg_color;
       background-color: rgb(0 0 0 / 65%);
 
@@ -287,26 +291,36 @@ state-group-row.room-history-row {
     }
 
     &:hover {
-      .instructions {
+      > .instructions {
         color: white;
         background-color: color-mix(in srgb, black calc(0.85 * 65%), currentColor calc(0.15 * 65%));
       }
     }
 
     &:active {
-      .instructions {
+      > .instructions {
         color: white;
         background-color: color-mix(in srgb, black calc(0.75 * 65%), currentColor calc(0.25 * 65%));
       }
     }
   }
 
-  .spinner {
+  > .spinner {
     min-width: 32px;
     min-height: 32px;
   }
 
-  image.osd.circular {
+  > button {
+    // Leave enough space at the start to click to be able to view small images.
+    &:dir(ltr) {
+      margin-left: 64px;
+    }
+    &:dir(rtl) {
+      margin-right: 64px;
+    }
+  }
+
+  > image.osd.circular {
     min-width: 64px;
     min-height: 64px;
     border-radius: 32px;
@@ -319,12 +333,12 @@ state-group-row.room-history-row {
   }
 
   &.compact {
-    .spinner {
+    > .spinner {
       min-width: 16px;
       min-height: 16px;
     }
 
-    image.osd.circular {
+    > image.osd.circular {
       min-width: 32px;
       min-height: 32px;
       -gtk-icon-size: 16px;
diff --git a/src/session/view/content/room_history/message_row/visual_media.rs b/src/session/view/content/room_history/message_row/visual_media.rs
index 5571d0f1..4ac2aca6 100644
--- a/src/session/view/content/room_history/message_row/visual_media.rs
+++ b/src/session/view/content/room_history/message_row/visual_media.rs
@@ -140,6 +140,9 @@ mod imp {
 
     impl WidgetImpl for MessageVisualMedia {
         fn measure(&self, orientation: gtk::Orientation, for_size: i32) -> (i32, i32, i32, i32) {
+            // Get the minimum size wanted by the overlay.
+            let (overlay_min, ..) = self.overlay.measure(orientation, for_size);
+
             // Get the maximum size for the current state.
             let max_size = if self.compact.get() {
                 MAX_COMPACT_DIMENSIONS
@@ -173,14 +176,17 @@ mod imp {
                     };
                     let (_, intrinsic_for_size, ..) = child.measure(other_orientation, -1);
 
-                    let (min, nat, ..) =
+                    let (child_min, child_nat, ..) =
                         child.measure(orientation, for_size.min(intrinsic_for_size));
 
-                    if nat != 0 {
+                    if child_nat != 0 {
                         // Limit the returned size to the max.
                         let max = max.try_into().unwrap_or(i32::MAX);
 
-                        return (min.min(max), nat.min(max), -1, -1);
+                        let min = child_min.max(overlay_min).min(max);
+                        let nat = child_nat.max(overlay_min).min(max);
+
+                        return (min, nat, -1, -1);
                     }
                 }
             }
@@ -206,13 +212,17 @@ mod imp {
                 .as_ref()
                 .and_then(VisualMediaMessage::dimensions)
                 .unwrap_or(FALLBACK_DIMENSIONS);
-            let nat = media_size
+            let child_nat = media_size
                 .scale_to_fit(wanted_size, gtk::ContentFit::ScaleDown)
                 .dimension_for_orientation(orientation)
                 .try_into()
                 .unwrap_or(i32::MAX);
 
-            (0, nat, -1, -1)
+            let max = max.try_into().unwrap_or(i32::MAX);
+            let min = overlay_min.min(max);
+            let nat = child_nat.max(overlay_min).min(max);
+
+            (min, nat, -1, -1)
         }
 
         fn request_mode(&self) -> gtk::SizeRequestMode {
diff --git a/src/session/view/content/room_history/message_row/visual_media.ui b/src/session/view/content/room_history/message_row/visual_media.ui
index 2e21c976..7656e409 100644
--- a/src/session/view/content/room_history/message_row/visual_media.ui
+++ b/src/session/view/content/room_history/message_row/visual_media.ui
@@ -34,6 +34,7 @@
             <property name="valign">center</property>
             <style>
               <class name="instructions"/>
+              <class name="overlaid"/>
             </style>
             <layout>
               <property name="measure">true</property>
@@ -64,6 +65,9 @@
             <property name="visible">False</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
+            <style>
+              <class name="overlaid"/>
+            </style>
             <layout>
               <property name="measure">true</property>
             </layout>
@@ -73,15 +77,17 @@
           <object class="GtkButton" id="hide_preview_button">
             <style>
               <class name="osd"/>
+              <class name="overlaid"/>
             </style>
             <property name="visible">False</property>
             <property name="halign">end</property>
             <property name="valign">start</property>
-            <property name="margin-end">3</property>
-            <property name="margin-top">3</property>
             <property name="icon-name">hide-symbolic</property>
             <property name="tooltip-text" translatable="yes">Hide media preview</property>
             <signal name="clicked" handler="hide_media" swapped="yes"/>
+            <layout>
+              <property name="measure">true</property>
+            </layout>
           </object>
         </child>
         <child type="overlay">
@@ -89,6 +95,7 @@
             <style>
               <class name="osd"/>
               <class name="circular"/>
+              <class name="overlaid"/>
             </style>
             <property name="visible">False</property>
             <property name="halign">center</property>