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

Open
#9,139 0 comments 0 reactions 0 assignees View on GitHub
astryx-report astryx-visual frontend
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.