fix(sqllab): Update style for code viewer container by justinpark · Pull Request #39075 · apache/superset

justinpark · 2026-04-03T00:28:46Z

SUMMARY

Fixes #39076

This commit updates the style for code viewer matching with the previous version.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

●_Superset_6_1_-_SQL_Lab_view_query_looks_bad_-_Asana

After:

TESTING INSTRUCTIONS

Screenshot

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

bito-code-review · 2026-04-03T00:28:56Z

Code Review Agent Run #12eff9

Actionable Suggestions - 0

Filtered by Review Rules

Bito filtered these suggestions based on rules created automatically for your feedback. Manage rules.

superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx - 1
- Invalid CSS border value · Line 69-69

Review Details

Files reviewed - 3 · Commit Range: 0bce6fc..0bce6fc
- superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
- superset-frontend/src/features/queries/QueryPreviewModal.tsx
- superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

netlify · 2026-04-03T00:34:24Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`0bce6fc`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69cf09c295b28900081cbd4f
😎 Deploy Preview	https://deploy-preview-39075--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-04-03T00:45:46Z

Codecov Report

❌ Patch coverage is 60.00000% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 64.48%. Comparing base (15bab22) to head (6b6546e).
⚠️ Report is 127 commits behind head on master.

Files with missing lines	Patch %	Lines
...rontend/src/features/queries/QueryPreviewModal.tsx	0.00%	2 Missing ⚠️
...nd/src/features/queries/SavedQueryPreviewModal.tsx	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #39075      +/-   ##
==========================================
- Coverage   64.48%   64.48%   -0.01%     
==========================================
  Files        2536     2536              
  Lines      130862   130872      +10     
  Branches    30358    30358              
==========================================
+ Hits        84387    84393       +6     
- Misses      45012    45016       +4     
  Partials     1463     1463

Flag	Coverage Δ
javascript	`65.83% <60.00%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

alexandrusoare · 2026-04-03T11:05:25Z

+    borderColor: theme.colorBorder,
+    borderStyle: 'solid',
+    marginTop: theme.sizeUnit * 4,
+    fontSize: '0.75em',


Could we use this instead? theme.fontSize

sounds good. done!

alexandrusoare · 2026-04-03T11:06:15Z

+  const codeBlockStyle = {
+    border: 1,
+    borderColor: theme.colorBorder,
+    borderStyle: 'solid',


Do we need to mention this?

Yes. Without borderStyle, no border made

alexandrusoare · 2026-04-03T11:07:33Z

+    marginTop: theme.sizeUnit * 4,
+    fontSize: '0.75em',
+    height: 375,
+  };


Can we use a more standardized height?

sure. updated

bito-code-review · 2026-04-03T18:43:41Z

Code Review Agent Run #882634

Actionable Suggestions - 0

Review Details

Files reviewed - 3 · Commit Range: 0bce6fc..aed6cfb
- superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
- superset-frontend/src/features/queries/QueryPreviewModal.tsx
- superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

michael-s-molina · 2026-04-06T12:27:25Z

@justinpark Can you remove the extra padding between the modal title and the content? I think you just need to remove the content top padding given that the header already has padding.

justinpark · 2026-04-07T22:27:47Z

justinpark Can you remove the extra padding between the modal title and the content? I think you just need to remove the content top padding given that the header already has padding.

updated.

codeant-ai-for-open-source · 2026-04-07T22:30:28Z

-      <CodeSyntaxHighlighter language="sql">{sql}</CodeSyntaxHighlighter>
+    <div
+      css={css`
+        margin: -${theme.sizeUnit * 6}px;


Suggestion: The new wrapper applies -sizeUnit * 6 margin on all four sides, but the modal body padding is not uniform (sizeUnit * 4 vertical and sizeUnit * 6 horizontal). This overcompensates top/bottom by 8px, which can push content into the header/footer area and cause layout overlap. Use axis-specific negative margins that match the modal body padding. [logic error]

Severity Level: Minor 🧹

- ⚠️ SQL Lab "View SQL" modal has misaligned vertical padding. - ⚠️ Query history SQL viewer content encroaches modal header spacing.

Suggested change

margin: -${theme.sizeUnit * 6}px;

margin: -${theme.sizeUnit * 4}px -${theme.sizeUnit * 6}px;

Steps of Reproduction ✅

1. Open SQL Lab (implemented in `superset-frontend/src/SqlLab/components/App/index.tsx`) and run any query so that results are available; the result view uses `ResultSet` (`src/SqlLab/components/ResultSet/index.tsx`), which conditionally renders `HighlightedSql` at lines 584–587 when `showSql` is true. 2. In the SQL Lab "Query history" table (`src/SqlLab/components/QueryTable/index.tsx`), each row's SQL column is rendered as a `<HighlightedSql>` inside a `Card` at lines 16–23 (offset block 280–319), so clicking that truncated SQL opens a modal via `HighlightedSql`. 3. `HighlightedSql` (`src/SqlLab/components/HighlightedSql/index.tsx`) renders a `<ModalTrigger>` at lines 112–124 with `modalBody={<HighlightSqlModal rawSql={rawSql} sql={sql} />}`, and `HighlightSqlModal` returns a wrapper `<div>` with `css={css`margin: -${theme.sizeUnit * 6}px;`}` at lines 83–88, so this negative margin is applied around the whole modal body content. 4. The `ModalTrigger` uses the shared `Modal` component from `packages/superset-ui-core/src/components/Modal/Modal.tsx`, whose `StyledModal` sets `.ant-modal-body { padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 6}px; }` at lines 123–126; combining this with `margin: -${theme.sizeUnit * 6}px;` on the inner `<div>` cancels left/right padding but overshoots top/bottom by `theme.sizeUnit * 2`, causing the SQL title and code block to visually encroach into the header/border area instead of aligning flush only with the horizontal padding as intended. The suggested change to `margin: -${theme.sizeUnit * 4}px -${theme.sizeUnit * 6}px;` would exactly negate the modal body padding vertically and horizontally, avoiding this layout mismatch.

Prompt for AI Agent 🤖

This is a comment left during a code review. **Path:** superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx **Line:** 86:86 **Comment:** *Logic Error: The new wrapper applies `-sizeUnit * 6` margin on all four sides, but the modal body padding is not uniform (`sizeUnit * 4` vertical and `sizeUnit * 6` horizontal). This overcompensates top/bottom by 8px, which can push content into the header/footer area and cause layout overlap. Use axis-specific negative margins that match the modal body padding. Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.

👍 | 👎

bito-code-review · 2026-04-07T23:32:54Z

Code Review Agent Run #a1b07e

Actionable Suggestions - 0

Additional Suggestions - 1

superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx - 1
- Custom CSS Usage Violation · Line 84-88
  
  The code adds custom CSS with a negative margin to the modal div, violating the guideline to avoid custom CSS whenever possible. Consider using Ant Design theming or styled components instead to maintain consistency.

Review Details

Files reviewed - 3 · Commit Range: aed6cfb..6b6546e
- superset-frontend/src/SqlLab/components/HighlightedSql/index.tsx
- superset-frontend/src/features/queries/QueryPreviewModal.tsx
- superset-frontend/src/features/queries/SavedQueryPreviewModal.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

(cherry picked from commit 4c2dd63)

fix(sqllab): Update style for code viewer container

0bce6fc

pull-request-size Bot added the size/M label Apr 3, 2026

justinpark requested review from michael-s-molina and rusackas April 3, 2026 00:29

dosubot Bot added the sqllab:design Related to the SQL Lab UI/UX label Apr 3, 2026

justinpark requested a review from sadpandajoe April 3, 2026 00:29

alexandrusoare reviewed Apr 3, 2026

View reviewed changes

address comments

aed6cfb

remove padding on modal body

6b6546e

codeant-ai-for-open-source Bot reviewed Apr 7, 2026

View reviewed changes

michael-s-molina approved these changes Apr 8, 2026

View reviewed changes

justinpark merged commit 4c2dd63 into apache:master Apr 8, 2026
84 of 85 checks passed

michael-s-molina pushed a commit that referenced this pull request Apr 13, 2026

fix(sqllab): Update style for code viewer container (#39075)

6017b1a

(cherry picked from commit 4c2dd63)

justinpark mentioned this pull request Apr 24, 2026

fix(view query): Update style for code viewer container #39635

Open

9 tasks

	margin: -${theme.sizeUnit * 6}px;
	margin: -${theme.sizeUnit * 4}px -${theme.sizeUnit * 6}px;

Conversation

justinpark commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review Bot commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #12eff9

Uh oh!

netlify Bot commented Apr 3, 2026

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

codecov Bot commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

alexandrusoare Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

justinpark Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

alexandrusoare Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

justinpark Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

alexandrusoare Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

justinpark Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #882634

Uh oh!

michael-s-molina commented Apr 6, 2026

Uh oh!

justinpark commented Apr 7, 2026

Uh oh!

codeant-ai-for-open-source Bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

bito-code-review Bot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #a1b07e

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

justinpark commented Apr 3, 2026 •

edited

Loading

bito-code-review Bot commented Apr 3, 2026 •

edited

Loading

codecov Bot commented Apr 3, 2026 •

edited

Loading

bito-code-review Bot commented Apr 3, 2026 •

edited

Loading

bito-code-review Bot commented Apr 7, 2026 •

edited

Loading