diff options
-rw-r--r-- | app/javascript/mastodon/features/status/components/detailed_status.js | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/widgets.scss | 10 |
3 files changed, 11 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 2921a26f9..0630387d2 100644 --- 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 8de53ca98..a98fa52c4 100644 --- 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 0699900dc..c97337e4e 100644 --- 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 { |