Problem

The icons and commands displayed next to reviewer names in the pull request view were misaligned horizontally across multiple reviewer rows, as shown in the screenshot below:

When some reviewers had both the re-request review button (sync icon) and a status icon, while others had only a status icon (like bot accounts), the rightmost icons (checkmarks, comment icons, etc.) did not align at the same horizontal position across rows. This created an inconsistent and unprofessional appearance.

Solution

Added align-items: center and justify-content: flex-end to the .reviewer-icons flexbox container, and hidden the aria alert div from the layout to prevent it from taking up space. These changes in webviews/common/common.css ensure proper vertical centering and horizontal alignment of icons across all reviewer rows.

.reviewer-icons {
 display: flex;
 align-items: center; /* ← Added for vertical centering */
 justify-content: flex-end; /* ← Added for horizontal alignment */
 gap: 4px;
}
.reviewer-icons [role='alert'] {
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}

Technical Details

The .reviewer-icons container uses flexbox layout and holds multiple child elements:

1. An optional .icon-button for the re-request review action (only shown for non-bot reviewers who have already reviewed)
2. A .section-icon for the review state (approved, changes requested, commented, etc.)
3. An optional div[role='alert'] for accessibility announcements when reviews are added

The key issues were:

1. Reviewers with both icons had their icon group starting at a different horizontal position than reviewers with only one icon
2. The aria alert div, while invisible, was participating in the flex layout and taking up space

By adding justify-content: flex-end, the icons are right-aligned within the container, ensuring the rightmost icon (status icon) always appears at the same horizontal position regardless of whether the sync button is present. The aria alert div is now positioned absolutely with zero dimensions, removing it from the layout flow while maintaining accessibility for screen readers.

The align-items: center ensures proper vertical centering of icons of different sizes within the container.

This change follows the same pattern used throughout the codebase in similar components like .section-item, .avatar-with-author, and .section-icon, all of which use align-items: center for proper alignment.

Fixes #7998

Fixes #7998

💬 Share your feedback on Copilot coding agent for the chance to win a 200ドル gift card! Click here to start the survey.