Re: [PR] fix(Dashboards): Tabs highlight and dataset contrast in darkmode issues [superset]

Fri, 08 Aug 2025 08:08:52 -0700 


korbit-ai[bot] commented on code in PR #34602:
URL: https://github.com/apache/superset/pull/34602#discussion_r2263238244


##########
superset-frontend/src/dashboard/components/gridComponents/Tab.jsx:
##########
@@ -79,7 +79,7 @@ const defaultProps = {
 
 const TabTitleContainer = styled.div`
   ${({ isHighlighted, theme: { sizeUnit, colors } }) => `
-    padding: ${sizeUnit}px ${sizeUnit * 2}px;
+    padding: ${sizeUnit}px ${sizeUnit * 8}px ${sizeUnit}px ${sizeUnit * 2}px;

Review Comment:
   ### Tab title overflow risk due to excessive padding <sub>![category 
Functionality](https://img.shields.io/badge/Functionality-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The significant increase in right padding (from 2x to 8x sizeUnit) could 
cause tab titles to overlap or be cut off when there are multiple tabs with 
long titles.
   
   
   ###### Why this matters
   With excessive right padding, tabs might not fit properly in the available 
space, leading to layout issues and poor user experience in the tab navigation.
   
   ###### Suggested change ∙ *Feature Preview*
   Consider using a more moderate padding value or implementing text 
truncation. Example solution:
   ```jsx
   padding: ${sizeUnit}px ${sizeUnit * 4}px ${sizeUnit}px ${sizeUnit * 2}px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/79e56fd4-8bac-4ddd-8feb-92cd0356a04a/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/79e56fd4-8bac-4ddd-8feb-92cd0356a04a?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/79e56fd4-8bac-4ddd-8feb-92cd0356a04a?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/79e56fd4-8bac-4ddd-8feb-92cd0356a04a?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/79e56fd4-8bac-4ddd-8feb-92cd0356a04a)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:22a411e0-2aad-45e9-a14c-4fbe547c88b7 -->
   
   
   [](22a411e0-2aad-45e9-a14c-4fbe547c88b7)



-- 
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]

Reply via email to