guardian / guardian/dotcom-rendering

Apply spacing to byline 'dotted line' without relying on document structure

Open
#12,486 0 comments 0 reactions 0 assignees View on GitHub
Pick me up Team Candidate: Articles and Publishing
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

A dotted line is displayed between the byline and notification toggle in the app layout on smaller viewports. This is rendered using the `DottedLine` component from Source Development Kitchen.

Contextual spacing is applied in `ArticleMeta.apps.tsx` via a very specific CSS selector:

```css
address > div > span > div:first-of-type {}
```

This is brittle and liable to break if the document structure changes. (This already happened when the `DottedLine` component was updated to be rendered with CSS rather than an SVG.)

We should look at applying the spacing directly to a containing element at the point where the component is used so we're not reliant on specific selectors and document structure.

![Image](https://github.com/user-attachments/assets/6c5771ad-ee8b-4c86-a430-30c8c1424f8f)
![Image](https://github.com/user-attachments/assets/b91f8a6a-4ecf-4f09-bbbe-44e7e673d812)

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.