Fix new hashtag page's items not being full-width on mobile (#9852)

Fix #9845

diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index 2921a26f97f629a2cc43b6514d50cd36e787c37c..0630387d297745febbf454132ad1c4e1a6705a50 100644 (file)
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -54,7 +54,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
 
   _measureHeight (heightJustChanged) {
     if (this.props.measureHeight && this.node) {
-      scheduleIdleTask(() => this.node && this.setState({ height: this.node.scrollHeight }));
+      scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
 
       if (this.props.onHeightChange && heightJustChanged) {
         this.props.onHeightChange();

diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 8de53ca986866413e16832ad84633f3471331809..a98fa52c47bb2b45b6f1c6fa8c9de4cf9cc5f8d3 100644 (file)
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -295,7 +295,7 @@
         color: $primary-text-color;
       }
 
-      @media screen and (max-width: $no-gap-breakpoint) {
+      @media screen and (max-width: 550px) {
         &.optional {
           display: none;
         }

diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 0699900dce3460b8c833f3504f0983727907ff06..c97337e4e3f77c837dd15b7a1f77df44133b92f6 100644 (file)
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -432,6 +432,10 @@ $fluid-breakpoint: $maximum-width + 20px;
 .statuses-grid {
   min-height: 600px;
 
+  @media screen and (max-width: 640px) {
+    width: 100% !important; // Masonry layout is unnecessary at this width
+  }
+
   &__item {
     width: (960px - 20px) / 3;
 
@@ -439,6 +443,10 @@ $fluid-breakpoint: $maximum-width + 20px;
       width: (940px - 20px) / 3;
     }
 
+    @media screen and (max-width: 640px) {
+      width: 100%;
+    }
+
     @media screen and (max-width: $no-gap-breakpoint) {
       width: 100vw;
     }
@@ -448,7 +456,7 @@ $fluid-breakpoint: $maximum-width + 20px;
     border-radius: 4px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-bottom: 1px solid lighten($ui-base-color, 12%);
+      border-top: 1px solid lighten($ui-base-color, 16%);
     }
 
     &.compact {