applied blackle's fix for gallery offset with full-width media

2 files changed, 15 insertions, 17 deletions

diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index a098322ba..b4979c603 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -53,6 +53,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             sensitive={status.get('sensitive')}
             media={status.getIn(['media_attachments', 0])}
             letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
             height={250}
             onOpenVideo={this.props.onOpenVideo}
             autoplay
@@ -65,6 +66,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             sensitive={status.get('sensitive')}
             media={status.get('media_attachments')}
             letterbox={settings.getIn(['media', 'letterbox'])}
+            fullwidth={settings.getIn(['media', 'fullwidth'])}
             height={250}
             onOpenMedia={this.props.onOpenMedia}
             autoPlayGif={this.props.autoPlayGif}
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index c79a2654c..503fb41f1 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1,6 +1,14 @@
 @import 'variables';
 @import 'variables-glitch';
 
+@mixin fullwidth-gallery {
+  &.full-width {
+    margin-left: -22px;
+    margin-right: -22px;
+    width: inherit;
+  }
+}
+
 .app-body {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -2706,10 +2714,7 @@ button.icon-button.active i.fa-retweet {
     margin-top: 15px; // Add margin when used bare for NSFW video player
   }
 
-  &.full-width {
-    margin-left: -68px;
-    width: calc(100% + 80px);
-  }
+  @include fullwidth-gallery;
 }
 
 .media-spoiler__warning {
@@ -4135,15 +4140,12 @@ button.icon-button.active i.fa-retweet {
   background: $base-shadow-color;
   width: 100%;
 
-  &.full-width {
-    margin-left: -68px;
-    width: calc(100% + 80px);
-  }
-
   .detailed-status & {
     margin-left:-10px;
     width: calc(100% + 22px);
   }
+
+  @include fullwidth-gallery;
 }
 
 .media-gallery__item {
@@ -4214,10 +4216,7 @@ button.icon-button.active i.fa-retweet {
   position: relative;
   width: 100%;
 
-  &.full-width {
-    margin-left: -68px;
-    width: calc(100% + 80px);
-  }
+  @include fullwidth-gallery;
 }
 
 .status__video-player-video {
@@ -4273,10 +4272,7 @@ button.icon-button.active i.fa-retweet {
   position: relative;
   width: 100%;
 
-  &.full-width {
-    margin-left: -68px;
-    width: calc(100% + 80px);
-  }
+  @include fullwidth-gallery;
 
   border: 0;
   display: block;