korbit-ai[bot] commented on code in PR #23700: URL: https://github.com/apache/superset/pull/23700#discussion_r2146210312
########## superset-frontend/src/components/TableCollection/index.tsx: ########## @@ -174,7 +174,7 @@ export const Table = styled.table` .table-cell { font-feature-settings: 'tnum' 1; text-overflow: ellipsis; - overflow: hidden; + overflow: auto; Review Comment: ### Ineffective Table Cell Overflow Scrolling <sub></sub> <details> <summary>Tell me more</summary> ###### What is the issue? Setting overflow to 'auto' on table cells will not provide the intended scrolling functionality when content exceeds max-width due to table cell behavior. ###### Why this matters Table cells do not create a new block formatting context for overflow scrolling. The content will still be clipped or cause the cell to expand, defeating the purpose of making content accessible. ###### Suggested change ∙ *Feature Preview* To achieve scrollable overflow in table cells, wrap the content in a div with defined dimensions and overflow: ```css .table-cell { font-feature-settings: 'tnum' 1; text-overflow: ellipsis; max-width: 320px; line-height: 1; vertical-align: middle; } .table-cell-content { max-height: 100px; max-width: 320px; overflow: auto; } ``` And in the JSX: ```jsx <td className="table-cell"> <div className="table-cell-content"> {cell.render('Cell')} </div> </td> ` ``` ###### Provide feedback to improve future suggestions [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91b9c5f4-a98d-4957-a7a1-075496becc94/upvote) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91b9c5f4-a98d-4957-a7a1-075496becc94?what_not_true=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91b9c5f4-a98d-4957-a7a1-075496becc94?what_out_of_scope=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91b9c5f4-a98d-4957-a7a1-075496becc94?what_not_in_standard=true) [](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/91b9c5f4-a98d-4957-a7a1-075496becc94) </details> <sub> 💬 Looking for more details? Reply to this comment to chat with Korbit. </sub> <!--- korbi internal id:29d529f2-c679-403e-943f-6eb606dbf146 --> [](29d529f2-c679-403e-943f-6eb606dbf146) -- 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: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org