Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Left-align comment collapse/expand button #1173

Merged

Conversation

alectrocute
Copy link
Contributor

@alectrocute alectrocute commented Jun 11, 2023

Hi all!

Here's a quick PR to left-align the collapse/expand button on comment nodes.

This is a pain point especially noticeable on mobile, when collapsing comments –different username lengths lead to the button being at different locations– forcing the user to hunt for the collapse button. It's very fatiguing. Having it left-aligned keeps it in the same place regardless of the other dynamic element widths.

Screenshot 2023-06-11 at 9 53 30 AM

Thanks so much!

aria-label={this.expandText}
data-tippy-content={this.expandText}
>
{this.state.collapsed ? (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While it was like this before your PR, it could be nice to rewrite lines 243-247 as:

<Icon icon={`${this.state.collapsed ? "plus" : "minus"}-square`} classes="icon-inline" />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, yes. Good suggestion, I'll push the change.

@SleeplessOne1917 SleeplessOne1917 merged commit b6841b4 into LemmyNet:main Jun 11, 2023
@alectrocute alectrocute deleted the collapse-expand-align-comment branch June 11, 2023 14:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants