Fix position of wide images on IRC / modern layout (#8667)

* Move declarations related to position from _MImageBody.scss to _EventTile.scss

These declarations should not be defined as default values as position depends on other factors such as layout, etc.

Signed-off-by: Suguru Hirahara <[email protected]>

* Move min-height and min-width declarations from _MImageBody.scss to _EventTile.scss

Since min-height and min-width have been specified for bubble layout, the declarations have been expected to be applied to the other layouts.

Signed-off-by: Suguru Hirahara <[email protected]>

* Apply 'justify-content: center' to bubble layout only

'justify-content: center' was added for the bubble layout with 1436f23. It should not be applied to the other layouts.

In order to prevent an issue related to cascading from happening, 'justify-content: flex-start' is explicitly specified.

Signed-off-by: Suguru Hirahara <[email protected]>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/messages/_MImageBody.scss

@@ -62,12 +62,6 @@ $timeline-image-border-radius: 8px;
         overflow: hidden;
         contain: paint;
 
-        min-height: $font-44px;
-        min-width: $font-44px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
         // Override inline max-width value to avoid overflow
         max-width: 100% !important;
 

res/css/views/rooms/_EventBubbleTile.scss

@@ -156,9 +156,12 @@ limitations under the License.
         padding-right: 48px;
     }
 
-    .mx_MImageBody_thumbnail_container {
-        min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
-        min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
+    .mx_MImageBody {
+        .mx_MImageBody_thumbnail_container {
+            justify-content: center;
+            min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
+            min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
+        }
     }
 
     .mx_CallEvent {

res/css/views/rooms/_EventTile.scss

@@ -58,6 +58,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
     }
 
+    .mx_MImageBody {
+        .mx_MImageBody_thumbnail_container {
+            display: flex;
+            align-items: center; // on every layout
+        }
+    }
+
     &[data-layout=group] {
         .mx_EventTile_line {
             line-height: var(--GroupLayout-EventTile-line-height);
@@ -265,6 +272,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
     .mx_MImageBody {
         margin-right: 34px;
+
+        .mx_MImageBody_thumbnail_container {
+            justify-content: flex-start;
+            min-height: $font-44px;
+            min-width: $font-44px;
+        }
     }
 
     .mx_EventTile_e2eIcon {