diff --git a/src/components/ApiLogo/styled.elements.ts b/src/components/ApiLogo/styled.elements.ts index 3d1099ec..c9ee98df 100644 --- a/src/components/ApiLogo/styled.elements.ts +++ b/src/components/ApiLogo/styled.elements.ts @@ -3,7 +3,7 @@ import styled from '../../styled-components'; export const LogoImgEl = styled.img` max-height: ${props => props.theme.logo.maxHeight}; width: auto; - display: inline-block; + display: block; max-width: 100%; `; diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index 8db73f39..818b9034 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -19,7 +19,9 @@ import { ResponseSamples } from '../ResponseSamples/ResponseSamples'; import { OperationModel as OperationType } from '../../services/models'; const OperationRow = styled(Row)` - transform: translateZ(0); + backface-visibility: hidden; + contain: content; + overflow: hidden; position: relative; diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index 547a8121..e0b03df4 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -10,7 +10,7 @@ import { ContentItems } from '../ContentItems/ContentItems'; import { OptionsProvider } from '../OptionsProvider'; import { SideMenu } from '../SideMenu/SideMenu'; import { StickyResponsiveSidebar } from '../StickySidebar/StickyResponsiveSidebar'; -import { ApiContent, RedocWrap } from './elements'; +import { ApiContent, RedocWrap, BackgroundStub } from './elements'; import { SearchBox } from '../SearchBox/SearchBox'; @@ -52,6 +52,7 @@ export class Redoc extends React.Component { + diff --git a/src/components/Redoc/elements.tsx b/src/components/Redoc/elements.tsx index c21d81f4..3c1091c6 100644 --- a/src/components/Redoc/elements.tsx +++ b/src/components/Redoc/elements.tsx @@ -35,11 +35,24 @@ export const RedocWrap = styled.div` `; export const ApiContent = styled.div` - z-index: 10; + z-index: 1; position: relative; overflow: hidden; width: calc(100% - ${props => props.theme.menu.width}); ${media.lessThan('small')` width: 100%; `}; + contain: layout; +`; + +export const BackgroundStub = styled.div` + background: ${props => props.theme.rightPanel.backgroundColor}; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: calc((100% - ${props => props.theme.menu.width}) * 0.4); + ${media.lessThan('medium')` + display: none; + `}; `; diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx index cebbdb5e..01257940 100644 --- a/src/components/SearchBox/SearchBox.tsx +++ b/src/components/SearchBox/SearchBox.tsx @@ -7,7 +7,7 @@ import { MenuItem } from '../SideMenu/MenuItem'; import { MarkerService } from '../../services/MarkerService'; import { SearchDocument } from '../../services/SearchWorker.worker'; -import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox } from './elements'; +import { ClearIcon, SearchIcon, SearchInput, SearchResultsBox, SearchWrap } from './elements'; export interface SearchBoxProps { search: SearchStore; @@ -92,7 +92,7 @@ export class SearchBox extends React.PureComponent b.score - a.score); return ( -
+ {this.state.term && ×} )} -
+ ); } } diff --git a/src/components/SearchBox/elements.tsx b/src/components/SearchBox/elements.tsx index 7f28722d..860bc639 100644 --- a/src/components/SearchBox/elements.tsx +++ b/src/components/SearchBox/elements.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import styled from '../../styled-components'; import { MenuItemLabel } from '../SideMenu/styled.elements'; +export const SearchWrap = styled.div` + padding: 5px 0; +`; + export const SearchInput = styled.input.attrs({ className: 'search-input', })` diff --git a/src/components/StickySidebar/StickyResponsiveSidebar.tsx b/src/components/StickySidebar/StickyResponsiveSidebar.tsx index 7383ca43..fca03115 100644 --- a/src/components/StickySidebar/StickyResponsiveSidebar.tsx +++ b/src/components/StickySidebar/StickyResponsiveSidebar.tsx @@ -27,7 +27,8 @@ const StyledStickySidebar = withProps<{ open?: boolean }>(styled.div)` display: flex; flex-direction: column; - transform: translateZ(0); + backface-visibility: hidden; + contain: strict; height: 100vh; position: sticky; diff --git a/src/services/MarkdownRenderer.ts b/src/services/MarkdownRenderer.ts index 4154b4d7..b651a14b 100644 --- a/src/services/MarkdownRenderer.ts +++ b/src/services/MarkdownRenderer.ts @@ -35,7 +35,9 @@ export class MarkdownRenderer { constructor() { this.headingEnhanceRenderer = new marked.Renderer(); - this.originalHeadingRule = this.headingEnhanceRenderer.heading; + this.originalHeadingRule = this.headingEnhanceRenderer.heading.bind( + this.headingEnhanceRenderer, + ); this.headingEnhanceRenderer.heading = this.headingRule; }