Fix max height on desktop table of contents
Luke Karrys committed
Oct 17, 2023 at 11:02 UTC
1debf42a10b7a6f481fcf175d70f845e84c9b823
3 files changed
+51
-44
src/components/table-of-contents.js
+9
-2
@@ -55,12 +55,19 @@ export const Desktop = withTableOfContents(({items}) => (
55
display: ['none', null, 'block'],
56
position: 'sticky',
57
top: HEADER_HEIGHT + 48,
58
- maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`,
58
+ maxHeight: `calc(100vh - ${HEADER_HEIGHT + 48}px)`,
59
}}
60
>
61
<Heading as="h3" sx={{fontSize: 1, display: 'inline-block', fontWeight: 'bold'}} id="toc-heading">
62
Table of contents
63
</Heading>
64
- <TableOfContents aria-labelledby="toc-heading" items={items} />
64
+ <Box
65
+ sx={{
66
+ maxHeight: `calc(100% - 21px)`,
67
+ overflowY: 'scroll',
68
+ }}
69
+ >
70
+ <TableOfContents aria-labelledby="toc-heading" items={items} />
71
+ </Box>
72
</Box>
73
))
src/mdx/index.js
+1
-39
@@ -8,7 +8,7 @@ import textContent from 'react-addons-text-content'
8
import Code from './code'
9
import NavHierarchy from './nav-hierarchy'
10
import {useSlugger} from '../layout'
11
-import {HEADER_HEIGHT, SKIP_NAV} from '../constants'
11
+import {HEADER_HEIGHT} from '../constants'
12
13
const required = (prop, name) => {
14
if (!prop) {
@@ -21,44 +21,6 @@ export {Link, Code, NavHierarchy as Index}
21
22
export const Pre = ({children}) => children
23
24
-const SkipLinkBase = props => (
25
- <Link
26
- {...props}
27
- href={`#${SKIP_NAV.id}`}
28
- sx={{
29
- p: 3,
30
- color: 'fg.onEmphasis',
31
- backgroundColor: 'accent.emphasis',
32
- fontSize: 1,
33
- }}
34
- >
35
- Skip to content
36
- </Link>
37
-)
38
-
39
-export const SkipLink = styled(SkipLinkBase)`
40
- z-index: 20;
41
- width: auto;
42
- height: auto;
43
- clip: auto;
44
- position: absolute;
45
- overflow: hidden;
46
-
47
- // The following rules are to ensure that the element
48
- // is visually hidden, unless it has focus. This is the recommended
49
- // way to hide content from:
50
- // https://webaim.org/techniques/css/invisiblecontent/#techniques
51
-
52
- &:not(:focus) {
53
- clip: rect(1px, 1px, 1px, 1px);
54
- clip-path: inset(50%);
55
- height: 1px;
56
- width: 1px;
57
- margin: -1px;
58
- padding: 0;
59
- }
60
-`
61
-
24
const StyledHeading = styled(Heading)`
25
margin-top: ${themeGet('space.4')};
26
margin-bottom: ${themeGet('space.3')};
src/page.js
+41
-3
@@ -1,7 +1,45 @@
1
import React from 'react'
2
-import {BaseStyles, themeGet} from '@primer/react'
3
-import {createGlobalStyle} from 'styled-components'
4
-import {SkipLink} from './mdx'
2
+import {BaseStyles, themeGet, Link} from '@primer/react'
3
+import styled, {createGlobalStyle} from 'styled-components'
4
+import {SKIP_NAV} from './constants'
5
+
6
+const SkipLinkBase = props => (
7
+ <Link
8
+ {...props}
9
+ href={`#${SKIP_NAV.id}`}
10
+ sx={{
11
+ p: 3,
12
+ color: 'fg.onEmphasis',
13
+ backgroundColor: 'accent.emphasis',
14
+ fontSize: 1,
15
+ }}
16
+ >
17
+ Skip to content
18
+ </Link>
19
+)
20
+
21
+export const SkipLink = styled(SkipLinkBase)`
22
+ z-index: 20;
23
+ width: auto;
24
+ height: auto;
25
+ clip: auto;
26
+ position: absolute;
27
+ overflow: hidden;
28
+
29
+ // The following rules are to ensure that the element
30
+ // is visually hidden, unless it has focus. This is the recommended
31
+ // way to hide content from:
32
+ // https://webaim.org/techniques/css/invisiblecontent/#techniques
33
+
34
+ &:not(:focus) {
35
+ clip: rect(1px, 1px, 1px, 1px);
36
+ clip-path: inset(50%);
37
+ height: 1px;
38
+ width: 1px;
39
+ margin: -1px;
40
+ padding: 0;
41
+ }
42
+`
43
44
const GlobalStyles = createGlobalStyle`
45
body {