Skip to content

feat(): set line-height to the expansion-panel title and subtitle#2237

Open
adrianptrv wants to merge 1 commit into
masterfrom
apetrov/expansion-panel-slots
Open

feat(): set line-height to the expansion-panel title and subtitle#2237
adrianptrv wants to merge 1 commit into
masterfrom
apetrov/expansion-panel-slots

Conversation

@adrianptrv
Copy link
Copy Markdown
Contributor

@adrianptrv adrianptrv commented May 29, 2026

Closes: #1978

There were actually two separate issues in this bug.

The first issue came from the Bootstrap CDN import, which applies global styles to all heading elements.
Screenshot 2026-05-29 at 20 09 54

As a result, in the sample, our slotted h1 and h6 elements received a fixed line-height of 1.2. This value was too small for some of the used fonts (mainly noticeable with the default Windows OS font), causing parts of the text to overflow outside of the element.
Screenshot 2026-05-29 at 20 08 41

The only way to make our component styles override those externally applied styles would be to add !important to our title and subtitle classes, which we prefer to avoid.

If we still want to use external styles such as the Bootstrap CDN import, we should be more mindful of which elements we are slotting into the component slots. For the Expansion Panel title and subtitle specifically, the best approach is to use span elements. (We are currently working on another task to improve the documentation for slotted elements and clarify which elements are recommended to use in each slot.)

However, regarding the second issue, I tried removing the Bootstrap CDN import, and after doing so, I noticed that the title still had the same problem. The set font-size and line-height values were too close, which again caused some fonts (mostly the default Windows OS font) to overflow outside of the element. Because of this, I changed the line-height to normal instead of using a fixed value. This ensures that the text always renders correctly regardless of the font being used.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses text clipping in the igc-expansion-panel header by ensuring the slotted title and subtitle use a font-dependent line height, preventing descenders (e.g., “g”, “p”, “y”) from being cut off—especially noticeable with some Windows default fonts and/or external typography resets.

Changes:

  • Set line-height: normal on the slotted title content.
  • Set line-height: normal on the slotted subtitle content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: label part of the ExpansionPanel is being cut off for the small alphabet

3 participants