fix(activity-header): align header with icon by center

[nd0ut]

Description

Checklist

• Tests (if applicable)
• Documentation (if applicable)
• Changelog stub (or use conventional commit messages)

Summary by CodeRabbit

• Style
  • Enhanced activity header visual layout with automatic icon sizing and improved spacing consistency between header elements for a more polished appearance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds two CSS styling rules to the activity header component: one to automatically size icons and another to apply consistent padding between direct div children, affecting layout presentation without altering functional behavior.

Changes

Cohort / File(s)	Summary
Activity Header Styling src/blocks/ActivityHeader/activity-header.css	Added two CSS rules: (1) uc-activity-header > div > uc-icon { width: auto; } for automatic icon sizing, and (2) uc-activity-header > div { gap: var(--uc-padding); } for consistent inter-element spacing using design system variable.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is entirely a template with no actual content filled in—all sections are empty placeholders, providing no information about the changes, rationale, or implementation details.	Fill in the description with the actual change details, link to any related issue, explain the alignment fix, and consider checking relevant checklist items.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: fixing activity header alignment with its icon by centering, which directly matches the CSS modifications for icon sizing and spacing.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/header-title-align

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bdece2a and 0466fdd.

📒 Files selected for processing (1)

• src/blocks/ActivityHeader/activity-header.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build

🔇 Additional comments (2)

src/blocks/ActivityHeader/activity-header.css (2)

21-23: LGTM! Gap property achieves consistent spacing.

Adding gap to header divs creates proper spacing between items (likely icon and text) within each header section. Since these divs are already flex containers (from Line 12), the gap property will work correctly. This change, combined with the icon width adjustment, achieves the alignment objective mentioned in the PR title by ensuring icons and adjacent content have consistent spacing.

---

17-19: The width: auto change is appropriate and safe.

Setting width: auto on icons within header divs allows natural sizing. This rule is narrowly scoped to uc-activity-header > div > uc-icon and won't affect icons in other contexts, which have their own CSS rules with different selectors. The pattern is already used elsewhere in the codebase (e.g., simple-btn.css).

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR fixes the alignment of the ActivityHeader component by centering it with its icon. The changes adjust icon sizing and add proper spacing between flex items.

• Overrides the default icon width to be automatic instead of fixed button size
• Adds gap spacing to properly distribute child elements within the header

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

These two CSS rules target the same element (uc-activity-header > div). They should be combined into a single rule to improve maintainability and reduce duplication.