Reactions: Fix avatar display bugs

[obenland]

Fixes margins between avatars and details button, when there are hidden avatars:

Before	After

Fixes hidden avatars when there are fewer Likes than reposts:

Before	After

Proposed changes:

• Adjust styles to maintain consistent margin between avatars and detail button.
• Add comment type context to decide how many avatars to show.

Testing instructions:

• On a test post with a different amount of Likes and Reposts, make sure all avatars are displayed as expected.
• Make sure the distance between avatars and button is consistent.

Changelog entry

• Automatically create a changelog entry from the details below.

Changelog Entry Details

Significance

• Patch
• Minor
• Major

Type

• Added - for new features
• Changed - for changes in existing functionality
• Deprecated - for soon-to-be removed features
• Removed - for now removed features
• Fixed - for any bug fixes
• Security - in case of vulnerabilities

Message

The amount of avatars shown in the Reactions block no longer depends on the amount of likes, but is comment type agnostic.

[Copilot]

Pull Request Overview

This PR resolves avatar display issues by refining element selection and adjusting spacing between reaction elements. Key changes include filtering reaction groups by reaction type in the JS view, updating CSS gap and margin rules to ensure consistent spacing, and adding a data-reaction-type attribute in the PHP render for consistency.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

File	Description
src/reactions/view.js	Filters reaction-group elements based on reactionType attribute.
src/reactions/style.scss	Adjusts spacing (gap and margin rules) to ensure proper avatar layout.
src/reactions/render.php	Introduces data-reaction-type attribute to match JS element filtering.
build/*	Builds updated assets to reflect source code changes.

Comments suppressed due to low confidence (1)

src/reactions/style.scss:47

• Verify that the use of the ':has' pseudo-class is fully supported by all target browsers, as its performance and compatibility could affect the proper removal of margin on avatars without a hidden sibling.

				&:not([hidden]):not(:has(~ li:not([hidden]))) {

[pfefferle]

do these quotation marks work properly 😳

[obenland]

In my testing they did. What's the concern?

[pfefferle]

that they won't work 😂

(simply haven't seen them in use for JS, CSS or HTML)