dosubot[bot] commented on issue #36357: URL: https://github.com/apache/superset/issues/36357#issuecomment-3596318167
<!-- Answer --> The overlap happens because the dashboard card layout uses flexbox with `flex-wrap: nowrap` and a fixed `max-width` for the status label container, which doesn't allow longer translated labels to fit without overlapping the timestamp. The relevant styles are in the `ListViewCard` component, specifically the `CoverFooterRight` styled div, which has `max-width: 200px`, `overflow: hidden`, and `text-overflow: ellipsis`—this truncates but can also cause overlap when the label is too long for the space provided. The label itself uses `inline-flex` and `white-space: nowrap`, so it won't wrap or push the timestamp aside, especially when translations are longer than in English ([source](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx#L104-L123)). To fix this, consider updating the layout to allow wrapping or increase the max-width for the status label container. For example, changing `flex-wrap: nowrap` to `flex-wrap: wrap` in the `CoverFooter` styled div, or increasing `max-width` in `CoverFooterRight`, will help accommodate longer translations. You could also add a tooltip to show the full label if truncation is necessary. These changes will make the layout more responsive and prevent overlap regardless of language. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/54208309-dc4e-4cf9-b46d-c91d5c4591c3?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=The%20overlap%20happens%20because%20the%20dashboard%20card%20layout%20uses%20flexbox%20with%20%60flex-wrap%3A%20nowrap%60%20and%20a%20fixed%20%60max-width%60%20for%20the%20status%20label%20container%2C%20which%20doesn%27t%20allow%20longer%20translated%20labels%20to%20fit%20without%20overlapping%20the%20timestamp.%20The%20relevant%20styles%20are%20in%20the%20%60ListViewCard%60%20component%2C%20specifically%20the%20%60CoverFooterRight%60%20styled%20div%2C%20which%20has%20%60max-width%3A%20200px%60%2C%20%60overflow%3A%20hidden%60%2C%20and%20%60text-overflow%3A%20ellipsis%60%E2%80%94this%20truncates%20but%20can%20also%20cause%20overlap%20when%20the%20label%20is%20too%20long%20for%20the%20space%20provided.%20The%20label%20itself%20uses%20%60inline-flex% 60%20and%20%60white-space%3A%20nowrap%60%2C%20so%20it%20won%27t%20wrap%20or%20push%20the%20timestamp%20aside%2C%20especially%20when%20translations%20are%20longer%20than%20in%20English%20%28%5Bsource%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx%23L104-L123%29%29.%0A%0ATo%20fix%20this%2C%20consider%20updating%20the%20layout%20to%20allow%20wrapping%20or%20increase%20the%20max-width%20for%20the%20status%20label%20container.%20For%20example%2C%20changing%20%60flex-wrap%3A%20nowrap%60%20to%20%60flex-wrap%3A%20wrap%60%20in%20the%20%60CoverFooter%60%20styled%20div%2C%20or%20increasing%20%60max-width%60%20in%20%60CoverFooterRight%60%2C%20will%20help%20accommodate%20longer%20translations.%20You%20could%20also%20add%20a%20tooltip%20to%20show%20the%20full%20label%20if%20truncation%20is%20necessary.%20These%20changes%20will%20make%20the%20layout%20more%20responsive%20and%2 0prevent%20overlap%20regardless%20of%20language.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/36357) -- 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]
