Skip to content

Commit 1bfa9ee

Browse files
fix(ui5-card): remove max-height constraint from subtitle to prevent text clipping for tall-character languages (#13413)
Description The ui5-card-header subtitle text was being visually cut off for languages that require more vertical space per line, such as Hindi. This was caused by a hardcoded max-height: 2.1rem on the subtitle element, which is calculated based on Latin character height and does not accommodate the taller glyphs and diacritics found in other scripts. The -webkit-line-clamp: 2 rule already enforces the two-line limit correctly for all languages, making the max-height constraint redundant and harmful. Changes Removed max-height: 2.1rem from .ui5-card-header-subtitle in CardHeader.css Added a Cypress test to verify no max-height is applied to the subtitle How to Test Open a ui5-card-header with a subtitleText containing Hindi text, e.g.: आपके डिवाइस या फ़ाइल सर्वर से फ़ाइल (xlsx, csv, txt, आदि) Verify the subtitle text is fully visible and not clipped at the bottom. Before: Screenshot 2026-04-20 at 10 14 36 After: Screenshot 2026-04-20 at 10 14 24 Fixes #13379
1 parent f0e62ec commit 1bfa9ee

2 files changed

Lines changed: 30 additions & 1 deletion

File tree

packages/main/cypress/specs/Card.cy.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,4 +335,34 @@ describe("Card Accessibility", () => {
335335
.should("have.attr", "aria-labelledby", `${headerId2}-title ${headerId2}-subtitle`);
336336
});
337337
});
338+
339+
it("Tests that subtitle text is not cut off for languages requiring more vertical space", () => {
340+
cy.mount(
341+
<Card>
342+
<CardHeader
343+
slot="header"
344+
id="headerHindi"
345+
titleText="Title"
346+
subtitleText="आपके डिवाइस या फ़ाइल सर्वर से फ़ाइल">
347+
</CardHeader>
348+
</Card>
349+
);
350+
351+
// Verify the subtitle element's scrollHeight equals its offsetHeight (no clipping)
352+
cy.get("#headerHindi")
353+
.shadow()
354+
.find(".ui5-card-header-subtitle")
355+
.then($subtitle => {
356+
expect($subtitle[0].scrollHeight).to.be.lte($subtitle[0].offsetHeight + 1);
357+
});
358+
359+
// Verify no max-height is set on the subtitle
360+
cy.get("#headerHindi")
361+
.shadow()
362+
.find(".ui5-card-header-subtitle")
363+
.should($el => {
364+
const maxHeight = getComputedStyle($el[0]).maxHeight;
365+
expect(maxHeight).to.equal("none");
366+
});
367+
});
338368
});

packages/main/src/themes/CardHeader.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@
136136
font-weight: normal;
137137
color: var(--sapTile_TextColor);
138138
margin-top: var(--_ui5_card_header_subtitle_margin_top);
139-
max-height: 2.1rem;
140139
}
141140

142141
.ui5-card-header .ui5-card-header-text .ui5-card-header-title,

0 commit comments

Comments
 (0)