lablup / lablup/backend.ai-webui
Download modal: CLI tab code block background does not cover the horizontal scroll area, and the tab strip sits flush against the OS selector
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 344
Description
## Where
- **Page**: any page — the modal opens from the header user dropdown → **Downloads** (`summary.Downloads`), shown when `allowAppDownloadPanel` or `allowCLIDownloadPanel` is enabled
- **Region**: two spots in the same modal
1. the CLI tab's code block (the shell snippets)
1. the boundary between the tab strip and the OS selector row, on both tabs
- **Component** (if identified): `DownloadModal` (`react/src/components/DownloadModal.tsx`), which renders `BAITabs type="line"`, an Astryx `Selector`, and `SourceCodeView` (`react/src/components/SourceCodeView.tsx`, 8 importers)
## Observed
**1 — Code block background does not follow the horizontal scroll (CLI tab).**
When a shell snippet is wider than the modal and the code block is scrolled
horizontally, the scrolled-into-view part of the code is not backed by the code
block's own surface — the modal/page background shows through instead. The code
sitting on that bare background is noticeably harder to read than the code in
the unscrolled part.
**2 — No margin between the tab strip and the OS selector.**
The active tab's underline (데스크톱 앱 / CLI) sits directly on top of the `OS`
row, with no vertical gap separating the tab navigation from the first form row.
## Expected
1. The code block's background covers the **entire** scrollable area, so the
code keeps the same surface and contrast no matter how far it is scrolled
horizontally.
1. Vertical spacing between the tab strip and the OS selector row, so the tab
navigation reads as separate from the form content below it.
## Environment
- **Mode**: dark (light mode not checked)
- **Viewport**: Unknown
- **Browser/OS**: Unknown
- **Build**: Unknown
## Reproduction
1. Open the header user dropdown → **Downloads**.
1. Symptom 2 is visible immediately on the 데스크톱 앱 tab: the tab underline
is flush against the `OS` row.
1. Switch to the **CLI** tab and scroll one of the shell snippets horizontally
→ symptom 1.
## Evidence
- Screenshot (데스크톱 앱 tab, symptom 2): `/home/ubuntu/.claude/jobs/bc35620a/pasted-1.png` — to be attached in Jira by the reporter
## Notes
Filed as one issue at the reporter's request; the two symptoms are independent
and can be split at triage if that suits the fix. `SourceCodeView`'s code block
carries `overflow: 'auto'` — noted only as where to look, not as a cause.
JIRA Issue: FR-3716
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in react/src/components/DownloadModal.tsx, then inspect react/src/components/SourceCodeView.tsx and its overflow behavior. Reproduce both symptoms from the Downloads modal in dark mode, checking the CLI snippet while horizontally scrolling and the tab/OS boundary. Done means the code surface covers the full scrollable area and both tabs have visible spacing before the OS selector.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 72/100