Skip to content

Commit bab2a34

Browse files
authored
Hide horizontal scrollbar in header and tweak breakpoitns (#1749)
* Hide horizontal scrollbar in header * Tweak topbar breakpoints * Simplify breakpoints to fix animation
1 parent 85d83e8 commit bab2a34

File tree

3 files changed

+18
-6
lines changed

3 files changed

+18
-6
lines changed

src/components/LayoutHeader/DocSearch.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@ class DocSearch extends Component<{}, State> {
4545
paddingLeft: '0.25rem',
4646
paddingRight: '0.25rem',
4747

48-
[media.lessThan('large')]: {
48+
[media.lessThan('expandedSearch')]: {
4949
justifyContent: 'flex-end',
5050
marginRight: 10,
5151
},
52-
[media.between('medium', 'xlarge')]: {
53-
//width: 'calc(100% / 6)',
54-
},
55-
[media.greaterThan('large')]: {
52+
// TODO: Something like this could show the full search box in more cases
53+
// but it currently breaks its expanding animation.
54+
// [media.between('mediumSearch', 'largerSearch')]: {
55+
// width: 'calc(100% / 8)',
56+
// },
57+
[media.greaterThan('expandedSearch')]: {
5658
minWidth: 100,
5759
},
5860
}}>
@@ -80,7 +82,7 @@ class DocSearch extends Component<{}, State> {
8082
borderRadius: '0.25rem',
8183
},
8284

83-
[media.lessThan('large')]: {
85+
[media.lessThan('expandedSearch')]: {
8486
fontSize: 16,
8587
width: '16px',
8688
transition: 'width 0.2s ease, padding 0.2s ease',

src/components/LayoutHeader/Header.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,13 @@ const Header = ({location}: {location: Location}) => (
101101
WebkitOverflowScrolling: 'touch',
102102
height: '100%',
103103

104+
// Hide horizontal scrollbar
105+
scrollbarWidth: 'none',
106+
msOverflowStyle: 'none',
107+
'::-webkit-scrollbar': {
108+
display: 'none',
109+
},
110+
104111
[media.size('xsmall')]: {
105112
flexGrow: '1',
106113
width: 'auto',

src/theme.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const SIZES = {
3838
// Sidebar/nav related tweakpoints
3939
largerSidebar: {min: 1100, max: 1339},
4040
sidebarFixed: {min: 2000, max: Infinity},
41+
42+
// Topbar related tweakpoints
43+
expandedSearch: {min: 1180, max: Infinity},
4144
};
4245

4346
type Size = $Keys<typeof SIZES>;

0 commit comments

Comments
 (0)