guardian / guardian/dotcom-rendering
Apply spacing to byline 'dotted line' without relying on document structure
- 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.


Contributor guide
Assessment
This issue has not been assessed yet.