adobe / adobe/spectrum-web-components

[Bug]: overhanging diacritic mark is clipped horizontally in Thai language

Open
#6,060 4 comments 0 reactions 0 assignees View on GitHub
bug Component:Action button SEV 5 triage
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-action-button

### Library version

1.9.0

### Expected behavior

no clipping of overhanging diacritcal mark on last glyph in button, regardless of font

### Actual behavior

clips diacritic, depending on font

### Screenshots
Green circle is what it should look like, red circle shows clipping on right edge:
Image

### What browsers are you seeing the problem in?

Microsoft Edge, Safari, Chrome, Firefox

### How can we reproduce this issue?

repro steps are here:
https://jira.corp.adobe.com/browse/DVAWV-18693

### Sample code or abstract reproduction which illustrates the problem

https://stackblitz.com/edit/vitejs-vite-hts3aejq?file=src%2Fmy-element.ts

### Severity

SEV 5

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the sp-action-button component and the sample reproduction in src/my-element.ts from the linked StackBlitz project; compare the rendering of the final Thai glyph across the listed browsers and fonts. Done means the overhanging diacritic is no longer clipped on the button's right edge, matching the expected screenshot.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.