codeant-ai-for-open-source[bot] commented on code in PR #39235:
URL: https://github.com/apache/superset/pull/39235#discussion_r3497766701
##########
superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx:
##########
@@ -79,7 +79,7 @@ const onClick = (
const StyledButton = styled.span`
button {
- line-height: 13px;
+ line-height: 1;
Review Comment:
**Suggestion:** Forcing the button `line-height` to `1` is too tight for
many fonts and locales and can clip glyph ascenders/descenders when users
increase text size, which directly regresses resize-text behavior. Keep the
component’s default line-height or use a larger unitless value to avoid
clipping. [css layout issue]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
⚠️ Run query button text cramped at large font sizes.
⚠️ SQL Lab text resize behavior fails WCAG 1.4.4.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Start Superset with the PR frontend code and navigate to SQL Lab, where
`RunQueryActionButton` is defined in
`superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx:35-77`
(verified
via BulkRead).
2. Open a SQL editor tab; `SqlEditor` imports and renders
`RunQueryActionButton` at
`superset-frontend/src/SqlLab/components/SqlEditor/index.tsx:117` and uses
it at lines
835-837 (verified via Grep).
3. In the browser, increase the base font size or text-only zoom to around
200%, then
inspect the Run/Stop button rendered inside `StyledButton`, whose inner
`button` element
has `line-height: 1;` at line 82 in `RunQueryActionButton/index.tsx`.
4. Observe that with enlarged text the button label’s vertical space is
constrained
compared to other buttons, with glyph ascenders/descenders appearing cramped
or slightly
clipped, indicating that forcing `line-height: 1` can regress text-resize
behavior
relative to Ant Design’s default line-height.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=1d5f1fa1a6a64368a3b2133643dd7157&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=1d5f1fa1a6a64368a3b2133643dd7157&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/SqlLab/components/RunQueryActionButton/index.tsx
**Line:** 82:82
**Comment:**
*Css Layout Issue: Forcing the button `line-height` to `1` is too tight
for many fonts and locales and can clip glyph ascenders/descenders when users
increase text size, which directly regresses resize-text behavior. Keep the
component’s default line-height or use a larger unitless value to avoid
clipping.
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%2F39235&comment_hash=44efa480d742192eaf5976bbf3cce47af0898ed4cb97a95aff6b2bb01da3780d&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39235&comment_hash=44efa480d742192eaf5976bbf3cce47af0898ed4cb97a95aff6b2bb01da3780d&reaction=dislike'>👎</a>
##########
superset-frontend/src/dashboard/components/CustomizationsBadge/index.tsx:
##########
@@ -120,14 +120,14 @@ const TooltipContent = styled.div`
max-width: 300px;
overflow-x: hidden;
color: ${theme.colorText};
- font-size: ${theme.fontSizeSM}px;
+ font-size: ${theme.fontSizeSM / theme.fontSize}em;
`}
`;
const SectionName = styled.span`
${({ theme }) => `
font-weight: ${theme.fontWeightStrong};
- font-size: ${theme.fontSizeSM}px;
+ font-size: ${theme.fontSizeSM / theme.fontSize}em;
Review Comment:
**Suggestion:** `SectionName` is inside `TooltipContent`, which already
applies a reduced `font-size`; applying the same reduction again here compounds
the scaling and makes section headers significantly smaller than intended. Use
an inherited size (`1em`) or remove this inner override so text does not shrink
twice. [css layout issue]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
⚠️ Customizations tooltip header shrinks more than body text.
⚠️ Dashboard customization badge tooltip readability reduced at scale.
```
</details>
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Start Superset with the PR frontend code and open any dashboard
containing a chart with
active customizations so `CustomizationsBadge` renders; the component is
defined at
`superset-frontend/src/dashboard/components/CustomizationsBadge/index.tsx:108-128`
(verified via BulkRead).
2. Note that `SliceHeader` imports `CustomizationsBadge` at
`superset-frontend/src/dashboard/components/SliceHeader/index.tsx:43`, so
the badge
appears next to each chart title when the feature is in use (verified via
Grep).
3. Hover the customizations badge icon to display the tooltip built from
`TooltipContent`
(font-size `${theme.fontSizeSM / theme.fontSize}em` at lines 58-65) and
`SectionName`
(font-size `${theme.fontSizeSM / theme.fontSize}em` at line 130), meaning
the header text
uses an `em` size relative to an already downscaled parent.
4. Increase the browser base font size or text zoom to around 200% and
observe that the
"Display controls (%d)" header inside `SectionName` renders noticeably
smaller than
surrounding `GroupByItem` text, reflecting compounded scaling from nested
`em` font-size
rules rather than the intended single small-text scale.
```
</details>
[](https://app.codeant.ai/fix-in-ide?tool=cursor&prompt_id=8fc561ff82064b45969537a276012526&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=8fc561ff82064b45969537a276012526&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/dashboard/components/CustomizationsBadge/index.tsx
**Line:** 130:130
**Comment:**
*Css Layout Issue: `SectionName` is inside `TooltipContent`, which
already applies a reduced `font-size`; applying the same reduction again here
compounds the scaling and makes section headers significantly smaller than
intended. Use an inherited size (`1em`) or remove this inner override so text
does not shrink twice.
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%2F39235&comment_hash=5f4d886f7e17e5fc4c24486480b7383b527fa0cbdd4d5053a220f69f106156c6&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F39235&comment_hash=5f4d886f7e17e5fc4c24486480b7383b527fa0cbdd4d5053a220f69f106156c6&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]
