A tiny nitpick suggestion: On the figure element, i.e. the user's avatar, when it's collapsed, could we make the CSS `visibility: hidden;` rather than `display: none;`? This will still hide the avatar, but the width that the avatar takes up will still be on the page. This ensures the user's name, and the expand/contract button, do not move horizontally at all when the comment is collapsed or contracted. Makes it easier to contract and then expand, and arguably looks a little cleaner.
This does have the kinda-negative of making the contracted comment less visually different from expanded comments. If that were a concern, I'd still personally lean towards the expand/collapse button not moving position when clicked.
If it's a concern, you could consider changing the opacity of the `header` element to be `0.5` instead of `0.75`. This may be a nice improvement even without other changes. Or if we really want to keep the avatar width collapsed (display none), you could change the margin of the chevron button whenever it's collapsed, so its position doesn't move when collapsing/expanding.
See attached for a screenshot of what the header opacity + figure visibility CSS changes would look like (first comment is collapsed).
Script works great, thanks a ton for making this!
A tiny nitpick suggestion: On the figure element, i.e. the user's avatar, when it's collapsed, could we make the CSS `visibility: hidden;` rather than `display: none;`?
This will still hide the avatar, but the width that the avatar takes up will still be on the page. This ensures the user's name, and the expand/contract button, do not move horizontally at all when the comment is collapsed or contracted. Makes it easier to contract and then expand, and arguably looks a little cleaner.
This does have the kinda-negative of making the contracted comment less visually different from expanded comments. If that were a concern, I'd still personally lean towards the expand/collapse button not moving position when clicked.
If it's a concern, you could consider changing the opacity of the `header` element to be `0.5` instead of `0.75`. This may be a nice improvement even without other changes. Or if we really want to keep the avatar width collapsed (display none), you could change the margin of the chevron button whenever it's collapsed, so its position doesn't move when collapsing/expanding.
See attached for a screenshot of what the header opacity + figure visibility CSS changes would look like (first comment is collapsed).