diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index a65cf31c7..0f2c594bd 100644
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -192,8 +192,8 @@ class Status extends ImmutablePureComponent {
status: ImmutablePropTypes.map,
isLoading: PropTypes.bool,
settings: ImmutablePropTypes.map.isRequired,
- ancestorsIds: ImmutablePropTypes.list,
- descendantsIds: ImmutablePropTypes.list,
+ ancestorsIds: ImmutablePropTypes.list.isRequired,
+ descendantsIds: ImmutablePropTypes.list.isRequired,
intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool,
multiColumn: PropTypes.bool,
@@ -217,16 +217,6 @@ class Status extends ImmutablePureComponent {
componentDidMount () {
attachFullscreenListener(this.onFullScreenChange);
this.props.dispatch(fetchStatus(this.props.params.statusId));
-
- const { status, ancestorsIds } = this.props;
-
- if (status && ancestorsIds && ancestorsIds.size > 0) {
- const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
-
- window.requestAnimationFrame(() => {
- element.scrollIntoView(true);
- });
- }
}
static getDerivedStateFromProps(props, state) {
@@ -625,16 +615,22 @@ class Status extends ImmutablePureComponent {
};
componentDidUpdate (prevProps) {
- if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) {
- const { status, ancestorsIds } = this.props;
+ const { status, ancestorsIds, multiColumn } = this.props;
- if (status && ancestorsIds && ancestorsIds.size > 0) {
- const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
+ if (status && (ancestorsIds.size > prevProps.ancestorsIds.size || prevProps.status?.get('id') !== status.get('id'))) {
+ window.requestAnimationFrame(() => {
+ this.node?.querySelector('.detailed-status__wrapper')?.scrollIntoView(true);
- window.requestAnimationFrame(() => {
- element.scrollIntoView(true);
- });
- }
+ // In the single-column interface, `scrollIntoView` will put the post behind the header,
+ // so compensate for that.
+ if (!multiColumn) {
+ const offset = document.querySelector('.column-header__wrapper')?.getBoundingClientRect()?.bottom;
+ if (offset) {
+ const scrollingElement = document.scrollingElement || document.body;
+ scrollingElement.scrollBy(0, -offset);
+ }
+ }
+ });
}
}
@@ -701,16 +697,16 @@ class Status extends ImmutablePureComponent {
showBackButton
multiColumn={multiColumn}
extraButton={(
-
+
)}
/>
-