Fix alignment of reactions in bubble layout thread view (#7534)

* Fix alignment of reactions in bubble layout thread view

* Remove duplicate download link in thread view panel

* Fix bugs with layout of file pills

res/css/views/rooms/_EventTile.scss

@@ -880,8 +880,6 @@ $left-gutter: 64px;
             order: 999;
             padding-left: 0;
             padding-right: 0;
-            margin-left: 36px;
-            margin-right: 50px;
         }
     }
 
@@ -889,16 +887,20 @@ $left-gutter: 64px;
         margin-left: 36px;
         margin-right: 36px;
 
+        .mx_EventTile_line.mx_EventTile_mediaLine {
+            padding: 0 !important;
+            max-width: 100%;
+
+            .mx_MFileBody {
+                width: 100%;
+            }
+        }
+
         &[data-self=true] {
             align-items: flex-end;
 
             .mx_EventTile_line.mx_EventTile_mediaLine {
                 margin: 0 -13px 0 0; // align with normal messages
-                padding: 0 !important;
-
-                .mx_MFileBody ~ .mx_MessageTimestamp {
-                    bottom: calc($font-14px + 4px); // above the Decrypt/Download text line
-                }
             }
         }
     }
@@ -919,6 +921,11 @@ $left-gutter: 64px;
             }
         }
 
+        .mx_ReactionsRow {
+            margin-left: 36px;
+            margin-right: 50px;
+        }
+
         .mx_MessageTimestamp {
             left: auto;
             right: 2px !important;

src/components/views/messages/MFileBody.tsx

@@ -223,7 +223,8 @@ export default class MFileBody extends React.Component<IProps, IState> {
             </span>;
         }
 
-        const showDownloadLink = this.props.tileShape || !this.props.showGenericPlaceholder;
+        const showDownloadLink = (this.props.tileShape || !this.props.showGenericPlaceholder) &&
+            this.props.tileShape !== TileShape.Thread;
 
         if (isEncrypted) {
             if (!this.state.decryptedBlob) {