codeant-ai-for-open-source[bot] commented on code in PR #39257:
URL: https://github.com/apache/superset/pull/39257#discussion_r3651354374
##########
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx:
##########
@@ -394,6 +394,27 @@ const StyledTableTabWrapper = styled.div`
vertical-align: middle;
}
+ &.wide-sql-layout {
+ .datasource-key-cell {
+ width: 30%;
+ }
+
+ .datasource-label-cell {
+ width: 20%;
+ }
+
+ .datasource-sql-cell {
+ width: 50%;
+ min-width: 480px;
+ }
+
+ .datasource-sql-expression {
+ width: 100%;
+ min-width: 460px;
+ max-width: none;
+ }
Review Comment:
**Suggestion:** The expression editor is assigned a fixed minimum width of
460px even when the collection is rendered in a constrained table cell. This
can make calculated-column and metric rows overflow horizontally instead of
resizing with the modal, so the new layout is not usable at smaller viewport
sizes. [possible bug]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Metric SQL editors overflow constrained modal rows.
- ⚠️ Calculated-column editing becomes difficult on narrow screens.
- ⚠️ Side-by-side layout does not remain responsive at small widths.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open any dataset in the `DatasourceEditor` dataset-edit flow and navigate
to Metrics;
`renderMetricCollection()` supplies the metric collection at lines 2287-2306.
2. Navigate to Calculated Columns; the column collection uses the expression
renderer
added at lines 748-760 and 789-801.
3. Use a viewport narrow enough that the modal's `90vw` content area is less
than the
table's minimum intrinsic width.
4. The expression renderer adds the `datasource-sql-expression` class at
lines 753-754 and
794-795; the rule at lines 411-415 then enforces `min-width: 460px` and
`max-width: none`,
causing the textarea and its table row to remain wider than the constrained
cell and
overflow horizontally.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=a231bef2dc68462686176f52d9cec4e5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=a231bef2dc68462686176f52d9cec4e5&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
**Line:** 411:415
**Comment:**
*Possible Bug: The expression editor is assigned a fixed minimum width
of 460px even when the collection is rendered in a constrained table cell. This
can make calculated-column and metric rows overflow horizontally instead of
resizing with the modal, so the new layout is not usable at smaller viewport
sizes.
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.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39257&comment_hash=b01d368ecd74881e94746b111db051b008570e90267f6f839aa3124efd9eeb75&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39257&comment_hash=b01d368ecd74881e94746b111db051b008570e90267f6f839aa3124efd9eeb75&reaction=dislike'>👎</a>
##########
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx:
##########
@@ -394,6 +394,27 @@ const StyledTableTabWrapper = styled.div`
vertical-align: middle;
}
+ &.wide-sql-layout {
+ .datasource-key-cell {
+ width: 30%;
+ }
+
+ .datasource-label-cell {
+ width: 20%;
+ }
+
+ .datasource-sql-cell {
+ width: 50%;
+ min-width: 480px;
+ }
Review Comment:
**Suggestion:** The SQL expression column is forced to a minimum width of
480px while the modal can be as narrow as 90vw. On narrow laptop or
mobile-sized viewports this makes the table wider than the modal and introduces
horizontal overflow, preventing the side-by-side editor from fitting within the
modal. Use responsive widths or allow the SQL column to shrink below this fixed
minimum. [possible bug]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Metrics and calculated-column tables overflow narrow edit modals.
- ⚠️ SQL editors may require horizontal scrolling on small viewports.
- ⚠️ Column controls can become difficult to access beside the oversized SQL
column.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open the dataset editor through the dataset edit flow rendered by
`DatasourceEditor` in
`superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx`.
2. Resize the browser to a narrow laptop or mobile-sized viewport where the
modal's `90vw`
width is less than the table's combined column requirements.
3. Open the Metrics tab, whose content is wrapped in `StyledTableTabWrapper
className="wide-sql-layout"` at lines 2430-2437, or open the
Columns/Calculated Columns
tabs, which use the same wrapper at lines 2448-2450 and 2494-2496.
4. The `.datasource-sql-cell` rule at lines 406-409 requires the expression
column to
remain at least `480px` wide while also assigning it 50% width, so the
table's intrinsic
width can exceed the modal and produce horizontal overflow instead of
fitting the
side-by-side editor within the viewport.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=1f016b7f106c4fbe83e6691b96e66c39&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
[](https://app.codeant.ai/fix-in-ide?tool=vscode-claude&prompt_id=1f016b7f106c4fbe83e6691b96e66c39&service=github&base_url=https%3A%2F%2Fgithub.com&org=apache&repo=apache%2Fsuperset)
*(Use Cmd/Ctrl + Click for best experience)*
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/src/components/Datasource/components/DatasourceEditor/DatasourceEditor.tsx
**Line:** 406:409
**Comment:**
*Possible Bug: The SQL expression column is forced to a minimum width
of 480px while the modal can be as narrow as 90vw. On narrow laptop or
mobile-sized viewports this makes the table wider than the modal and introduces
horizontal overflow, preventing the side-by-side editor from fitting within the
modal. Use responsive widths or allow the SQL column to shrink below this fixed
minimum.
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.
Once fix is implemented, also check other comments on the same PR, and ask
user if the user wants to fix the rest of the comments as well. if said yes,
then fetch all the comments validate the correctness and implement a minimal fix
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39257&comment_hash=aba6eff0ca96cf9488b7833f9c64cf6b18b58e4cfaa2a9411d33fd3c39a84f56&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39257&comment_hash=aba6eff0ca96cf9488b7833f9c64cf6b18b58e4cfaa2a9411d33fd3c39a84f56&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
