lablup / lablup/backend.ai-webui

Admin → Information (Security card): the row status icon is not vertically centered with its label

Open Beginner friendly
#9,140 0 comments 0 reactions 0 assignees View on GitHub
astryx-report astryx-visual frontend
Dominant language
TypeScript
Stars
133
Forks
81
Avg merge
1d 12h
Merged PRs (30d)
355

Description

## Where

- **Page**: `/admin/information` (menu: Administration → Information; legacy flat URL `/information`)
- **Region**: the **Security** card — the two rows "Default administrator account changed" and "Uses SSL"
- **Component** (if identified): Astryx `MetadataList` / `MetadataListItem` (`react/src/components/Information.tsx`), with a `lucide-react` `Check` / `TriangleAlert` glyph as the row value

## Observed

In each Security row the right-hand status icon (✓ / ⚠) sits noticeably higher than the vertical center of its left-hand label. Measured off the screenshot at ~2x: on the "Default administrator account changed" row the check glyph's center is about 20px above the label's text center; on the "Uses SSL" row the warning triangle is about the same amount high. The label's own leading `?` help icon is correctly centered with the label text — only the value-side status icon is off.

## Expected

The row's value-side icon is vertically centered against its label, so the label text and the status glyph share one horizontal center line — the way the `?` help icon on the same row already aligns with its label.

## Environment

- **Mode**: dark (screenshot); light not checked
- **Viewport**: Unknown
- **Browser/OS**: Unknown
- **Build**: Unknown

## Reproduction

1. Log in as a superadmin.
1. Open Administration → Information.
1. Look at the **Security** card rows.

## Evidence

- Screenshot (dark mode, Security card): `/home/ubuntu/.claude/jobs/b4908bbd/pasted-1.png` — to be attached in Jira.

## Notes

`MetadataListItem` is used in 44 files across `react/src` and `packages/backend.ai-ui/src`; that is usage breadth only — the misalignment was observed on this page, and other usages were not checked. Scope: this page only.

JIRA Issue: FR-3717

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in react/src/components/Information.tsx, focusing on the Security card and its Astryx MetadataList/MetadataListItem rows. Compare the value-side lucide-react Check/TriangleAlert alignment with the label and its help icon, then verify the status glyphs are vertically centered on /admin/information in dark mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
84/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.