lablup / lablup/backend.ai-webui
Admin → Information (Security card): the row status icon is not vertically centered with its label
- 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