Fix reviewer icons horizontal misalignment in pull request view

[Copilot]

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

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Icons are misaligned</issue_title>
<issue_description>
Type: Bug

See screen capture. The icons/commands for reviewer are misaligned

Extension version: 0.121.2025101404
VS Code version: Code - Insiders 1.106.0-insider (f030344cf19e76e6b47d2d8ab003780a7fdb8171, 2025-10-15T05:02:11.625Z)
OS version: Darwin arm64 24.6.0
Modes:

System Info

Item	Value
CPUs	Apple M1 Pro (8 x 2400)
GPU Status	2d_canvas: enabled direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: enabled_on trees_in_viz: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled webgpu: enabled webnn: disabled_off
Load (avg)	2, 7, 7
Memory (System)	32.00GB (0.14GB free)
Process Argv	--log info --log github.copilot-chat=info --crash-reporter-id c8f02c9c-0a89-4cf8-a88c-8204c6be2a75
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
pythonvspyt551:31249597
nativeloc1:31118317
dwcopilot:31158714
dwoutputs:31242946
copilot_t_ci:31333650
g012b348:31231168
6gi0g917:31259950
pythonrdcb7:31268811
pythonpcpt1cf:31399617
6518g693:31302842
0g1h6703:31329154
testaa123:31335226
6abeh943:31336334
envsactivate1:31349248
editstats-enabled:31346256
aa_t:31379596
cloudbuttont:31366566
todos-0:31366869
qwen_all_req:31396049
multireplacestring:31382717
nb255704_tf:31377673
3efgi100_wstrepl:31382709
ae882133:31390472
trigger-command-fix:31379601
chat-sessions-view-c:31392542
auto_model_enabled:31396818
grok-control-prompt:31384642
use-responses-api:31390341
ic2f3768:31396430
applesignin:31399434
9i271672:31399627
je187915:31401257
nes-next-cursor-off:31401796
v2prompt_9f72f763:31401958

Comments on the Issue (you are @copilot in this section)

Fixes #7998

---

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

[alexr00]

@copilot they're misalligned horizontally. There are several lines of reviewers. The icons on the first light are misaligned horizontally with the subsequent lines.

[Copilot]

@copilot they're misalligned horizontally. There are several lines of reviewers. The icons on the first light are misaligned horizontally with the subsequent lines.

Fixed in commit 2c5d21d. Added justify-content: flex-end to right-align the icons, ensuring the rightmost icons (status icons) align at the same horizontal position across all reviewer rows.

[alexr00]

@copilot Not quite. It's happening when the review is added becuase of the div we add for an aria announcement:

vscode-pull-request-github/webviews/components/reviewer.tsx

Lines 33 to 34 in 2c5d21d

	{ariaAnnouncement ? <div role='alert' aria-label={ariaAnnouncement} /> : null}
	</div>

Make sure that that div is not taking up space.

[alexr00]

@copilot Not quite. It's happening when the review is added becuase of the div we add for an aria announcement:

vscode-pull-request-github/webviews/components/reviewer.tsx

Lines 33 to 34 in 2c5d21d

	{ariaAnnouncement ? <div role='alert' aria-label={ariaAnnouncement} /> : null}
	</div>

Make sure that that div is not taking up space.

[Copilot]

@copilot Not quite. It's happening when the review is added becuase of the div we add for an aria announcement: https://github.com/microsoft/vscode-pull-request-github/blob/2c5d21d5b17789b3233b329cfab...

Fixed in commit bc9b17b. Added CSS to hide the aria alert div from the layout while keeping it accessible to screen readers:

.reviewer-icons [role='alert'] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

@copilot Not quite. It's happening when the review is added becuase of the div we add for an aria announcement: https://github.com/microsoft/vscode-pull-request-github/blob/2c5d21d5b17789b3233b329cfab...

Fixed in commit bc9b17b. Added CSS to hide the aria alert div from the layout while keeping it accessible to screen readers:

.reviewer-icons [role='alert'] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}