Fix flex blowout on image reply (#8809)

* Set min-width to prevent a flex blowout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use a native spacing property Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set max-width: 100% to display name inside the image reply Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 10, 2022 · 1b7e9d9 · 1b7e9d9
1 parent 0d3fe30
commit 1b7e9d9
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/res/css/views/messages/_MImageReplyBody.scss b/res/css/views/messages/_MImageReplyBody.scss
@@ -16,17 +16,21 @@ limitations under the License.
 
 .mx_MImageReplyBody {
     display: flex;
+    column-gap: $spacing-4;
 
-    .mx_MImageBody_thumbnail_container {
+    .mx_MImageBody_thumbnail_container,
+    .mx_MImageReplyBody_info {
         flex: 1;
-        margin-right: 4px;
+        min-width: 0; // Prevent a blowout
     }
 
     .mx_MImageReplyBody_info {
-        flex: 1;
-
         .mx_MImageReplyBody_sender {
             grid-area: sender;
+
+            .mx_DisambiguatedProfile {
+                max-width: 100%;
+            }
         }
 
         .mx_MImageReplyBody_filename {