fix: enforce responsive web design via CSS word-break and flex-wrap properties (#1544)
https://github.com/npm/documentation/pull/1367 Co-authored-by: Sarkis Kovlekjian <kovlekjian@gmail.com>
Michael Smith committed
Apr 7, 2025 at 14:03 UTC
9c782a4164ec861e52352c4cdd6196adef15781f
2 files changed
+3
-2
src/components/page-footer.js
+1
-1
@@ -32,7 +32,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
32
33
return (
34
<>
35
- <Box sx={{display: 'flex', alignItems: 'center'}}>
35
+ <Box sx={{display: 'flex', alignItems: 'center', flexWrap: 'wrap'}}>
36
<Text sx={{mr: 2}}>
37
{contributors.length} {pluralize('contributor', contributors.length)}
38
</Text>
src/mdx/components.js
+2
-1
@@ -180,7 +180,7 @@ export const UnorderedList = styled.ul`
180
}
181
182
li {
183
- word-break: break-all;
183
+ word-break: break-word;
184
}
185
186
li > p {
@@ -196,6 +196,7 @@ export const OrderedList = UnorderedList.withComponent('ol')
196
197
export const Paragraph = styled.p`
198
margin: 0 0 ${themeGet('space.3')};
199
+ word-break: break-word;
200
`
201
202
export const Table = styled.table`