Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#5,184 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
76/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, scss, typescript
領域
design, frontend

調査の方向性

まず、コンポーネントのソースとスタイルで、丸いサイドナビゲーションボタンとヘルプパネル切り替えボタンのスタイル、およびアイコンの配置を確認します。issue には、ホストされた Table ビューのデモと、ずれを再現するためのブラウザー上での測定手順があります。各 SVG の中心と 30 × 30 のボタンの中心を比較し、該当する配置を調整して、デモで両方のアイコンが中央に配置されていることを確認します。

索引モデルが issue の本文から書いたものです。

説明

bug
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.

Toggle button Button size SVG size Button center Y SVG center Y Vertical offset
Open side navigation 30 × 30 16 × 16 77.5 75.5 −2
Open help panel 30 × 30 16 × 16 77.5 75.5 −2

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.

Official Table view demo with both circular navigation and help buttons selected; their icons are shifted upward
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
主要言語
TypeScript
スター
2.7k
フォーク
248
平均マージ
3日 14時間
マージ済み PR（30日）
83

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

cloudscape-design/components のほかの issue

cloudscape-design/components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。