fix(web): align spec header controls

What changed

This aligns the specification show header controls so the feed action, status dropdown, and Edit button share the same visual height and baseline.

• Wrapped the feed dropdown in a dedicated feeds-dropdown container so the component stylesheet can target the Noora dropdown trigger reliably.
• Sized the icon-only feed trigger from Noora’s medium icon and spacing variables instead of a standalone spacing token.
• Set the specification status dropdown to Noora’s medium size so it matches the adjacent Edit button.

Why

The header actions are scanned as one control group. When each control has a different height, the group looks unpolished and makes the Noora components feel inconsistent even though the underlying behavior is correct.

Root cause

The feed dropdown passed class="feeds-dropdown" directly into Noora’s dropdown component, while the component also owns its root class. The feed-specific stylesheet selectors did not target the actual trigger reliably, so the icon-only control kept different sizing. The status dropdown also used the component default size while the Edit button used the medium button size.

Approach

The fix keeps Noora as the source of the interactive controls and moves Hive-specific styling to a wrapper that follows the existing stylesheet convention. The status dropdown now opts into the same medium size as the neighboring action, so the layout relies on component sizing instead of one-off vertical offsets.

Impact

Specification pages now render a more consistent action group in the header. The feed menu behavior and the status transition menu behavior are unchanged.

Screenshots

Before:

After:

Validation

• mix format
• git diff --check
• mix test test/hive_web/components/layouts_test.exs test/hive_web/live/spec_live/show_test.exs passed 35 tests.
• Ran the app locally, connected through a headless Chrome browser, and captured before and after screenshots.

No GitHub comments yet.