Long "Modified at" timestamps overflow meta cards

[semohr]

Screenshot

Description

The "Modified at %s" (here using the German localization, "Geändert vor %s") metadata labels become partially obscured when the rendered timestamp string exceeds the available horizontal space. Long localized date formats are only partially visible.

Design input

Questions for design review:

• Should timestamps wrap or truncate?
• If truncated, should full values be exposed via tooltip?
• Are there responsive layout expectations for narrow widths?

Suggested labels:

• design:review

[dosubot]

Hi @semohr! I'm Dosu and I’m helping the superset team.

The root cause here is that ListViewCard applies text-overflow: ellipsis styling to the title and cover footer elements, but not to the description field where the "Modified at" timestamp is rendered [1]. The description is passed directly to Ant Design's Card.Meta component without any custom overflow handling [2].

The rendering chain is:

• DashboardCard / ChartCard format the string via t('Modified %s', changed_on_delta_humanized) [3] [4]
• This is passed as the description prop to ListViewCard
• ListViewCard passes it to Ant Design's Card.Meta, which has no built-in truncation for long descriptions

A fix would likely involve adding overflow/ellipsis styling to the .ant-card-meta-description element within ListViewCard's styled wrapper, similar to what's already done for the title. A title attribute (tooltip) on the description element would preserve access to the full text on hover.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[crimsondhaks]

Hey @semohr, I'd like to take a stab at this.

I dug into
index.tsx
and confirmed Dosu's diagnosis — description is passed straight through to AntD's Card.Meta with no overflow handling, while title and titleRight already have ellipsis + tooltip patterns to mirror.

My plan:

Add overflow: hidden; text-overflow: ellipsis; white-space: nowrap; to .ant-card-meta-description inside the existing StyledCard wrapper.
Wrap the description in the existing Tooltip component so the full localized string is reachable on hover (consistent with how title is handled in the same file).
No prop signature changes; CSS + a tooltip wrapper. Will share before/after screenshots in the PR. Going to verify visually using npm run dev in superset-frontend/.