[Bug]: Circular app layout navigation and help icons are shifted upward in the official demo #5184

Browser

No response

Package version

3.0.1302 in the original application; also reproduced on the hosted official demo (deployed version unverified)

React version

18.3.1 in the original application; hosted demo version unverified

Description

The menu and information icons inside the circular side-navigation and help-panel toggle buttons appear above the vertical center of their blue backgrounds.

This is also reproducible on the official Table view demo, without adding application-specific CSS.

Expected: both icons are vertically centered inside the circular buttons.

Actual: both SVG centers are 2 CSS pixels above their button centers in the tested environment.

All measurements are in CSS pixels. Absolute Y coordinates may vary with the viewport; the center difference is the relevant value.

Test environment: Codex in-app browser on macOS, desktop viewport 1280 × 720. The exact browser engine/version was not recorded; other browsers have not been tested. Reproduced on the hosted official demo on October 23, 2026; its deployed package and React versions have not been verified.

Source code

The existing official demo is sufficient to reproduce this: https://cloudscape.design/examples/react/table.html

Potentially related: #5015 proposed removing top vertical alignment from icons, but was closed without merging. I have not confirmed whether that change would address this issue.

I also checked #2008, which was fixed by #2009 and concerns horizontal positioning caused by iPad-specific inline padding. This report concerns vertical alignment.

Reproduction

1. Open https://cloudscape.design/examples/react/table.html at a desktop viewport (tested at 1280 × 720).
2. Keep the side navigation open and click Open help panel, so both circular buttons have visible blue backgrounds.
3. Observe that both icons sit slightly above the center.
4. Optionally run the following read-only measurement in the browser console:

const labels = ["Open side navigation", "Open help panel"];
console.table(
  [...document.querySelectorAll("button")]
    .filter(button => labels.includes(button.getAttribute("aria-label")))
    .map(button => {
      const svg = button.querySelector("svg");
      const buttonRect = button.getBoundingClientRect();
      const iconRect = svg.getBoundingClientRect();
      const buttonCenterY = buttonRect.top + buttonRect.height / 2;
      const iconCenterY = iconRect.top + iconRect.height / 2;
      return {
        button: button.getAttribute("aria-label"),
        buttonCenterY,
        iconCenterY,
        offsetY: iconCenterY - buttonCenterY,
      };
    })
);

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems