diplodoc-platform / diplodoc-platform/transform

HR divider height is inconsistent (`3.75px` rounds to `4px` or `5px`)

Open
#846 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
69
Forks
59
Avg merge
1d 21h
Merged PRs (30d)
6

Description

### Package version

_No response_

### Node version

_No response_

### Platform

_No response_

### What steps will reproduce the bug?

Image

### What is the expected behavior?

All `


` dividers have the same visual height (no rounding differences)

### What do you see instead?

The `


` divider right under the Note block is rendered `1px` thicker than other dividers (in the [editor](https://github.com/gravity-ui/markdown-editor) for example) (e.g. looks like `5px` while others are `4px`).

Image
Image

### Additional information

[CSS](https://github.com/diplodoc-platform/transform/blob/62249c5152dadeed8a9a16130284b5311c0bab5d/src/scss/_common.scss#L279) sets `hr { height: 0.25em; }.` With `line-height: 20px` this becomes `3.75px` in computed styles.

Proposed fix: make `hr` height a CSS variable in `px` (e.g. `--hr-height: 4px` by default) to ensure stable rendering across contexts

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.