codeant-ai-for-open-source[bot] commented on code in PR #41636:
URL: https://github.com/apache/superset/pull/41636#discussion_r3531614103
##########
superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx:
##########
@@ -54,11 +54,11 @@ export const StyledSelect = styled(Select, {
flex: ${headerPosition === 'left' ? 1 : 0};
line-height: ${theme.sizeXL}px;
- && .ant-select-selection-search {
+ && .ant-select-input {
left: 0px;
}
- && .ant-select-selection-item, .ant-select-selection-placeholder {
+ && .ant-select-content, .ant-select-selection-item,
.ant-select-placeholder {
max-height: ${theme.sizeXL}px;
}
Review Comment:
**Suggestion:** The selector list applies `&&` specificity boosting only to
the first selector, while `.ant-select-selection-item` and
`.ant-select-placeholder` are left with lower specificity. In AntD v6 those
latter rules can be overridden by built-in Select styles, so the height
constraint becomes inconsistent (value/placeholder can render at a different
height than content). Scope and boost all three selectors uniformly (for
example by nesting the selector list under a single `&&` block or repeating
`&&` per selector). [css layout issue]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ⚠️ Core Select UI shows inconsistent value versus content height.
- ⚠️ AgGridTable plugin Select controls may render uneven heights.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Open the core Select implementation at
`superset-frontend/packages/superset-ui-core/src/components/Select/Select.tsx`
lines
90-153, where the `Select` component renders the AntD select via
`StyledSelect` (see lines
64-66 importing `StyledSelect` and lines 45-80 where `<StyledSelect ... />`
is rendered).
2. Inspect the styled wrapper definition for `StyledSelect` in
`superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx`
lines
45-88, noting the CSS rule at lines 61-63: `&& .ant-select-content,
.ant-select-selection-item, .ant-select-placeholder { max-height:
${theme.sizeXL}px; }`.
3. Because of CSS selector list semantics, this rule compiles into three
separate
selectors: one scoped with `&&` (`&& .ant-select-content`) and two unscoped,
lower-specificity, global selectors (`.ant-select-selection-item` and
`.ant-select-placeholder`). Only `.ant-select-content` receives the
specificity boost tied
to `StyledSelect`, while the selected value and placeholder elements rely on
weaker global
overrides.
4. In a consumer such as the AgGrid Table plugin, `Select` from
`@superset-ui/core/components` is used (see
`superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx`
line 20
importing `Select` and line 230 exporting `StyledSelect = styled(Select)`),
which
internally renders the core `Select` and therefore uses `StyledSelect`. When
the
application is run and a Select control from this wrapper is displayed, AntD
v6’s built-in
styles for `.ant-select-selection-item` and `.ant-select-placeholder` can
override the
weaker global rules, causing the selected value and placeholder to render at
a different
max-height than `.ant-select-content`, leading to visually inconsistent
Select control
heights in normal usage.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=b5e7d79577a7459cb4ca28782cde0771&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=b5e7d79577a7459cb4ca28782cde0771&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/packages/superset-ui-core/src/components/Select/styles.tsx
**Line:** 61:63
**Comment:**
*Css Layout Issue: The selector list applies `&&` specificity boosting
only to the first selector, while `.ant-select-selection-item` and
`.ant-select-placeholder` are left with lower specificity. In AntD v6 those
latter rules can be overridden by built-in Select styles, so the height
constraint becomes inconsistent (value/placeholder can render at a different
height than content). Scope and boost all three selectors uniformly (for
example by nesting the selector list under a single `&&` block or repeating
`&&` per selector).
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%2F41636&comment_hash=61d9fd98570c541a450b3add8002c534b1a4eba12e6ec87eb292c9fbe8d53a2d&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F41636&comment_hash=61d9fd98570c541a450b3add8002c534b1a4eba12e6ec87eb292c9fbe8d53a2d&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]
