mirror of
https://github.com/Redocly/redoc.git
synced 2025-02-07 05:20:32 +03:00
fix: remove excessive whitespace between md sections on small screens
fixes #874
This commit is contained in:
parent
faa74d6002
commit
e318fb3381
|
@ -1,14 +1,16 @@
|
|||
import { SECTION_ATTR } from '../services/MenuStore';
|
||||
import styled, { media } from '../styled-components';
|
||||
|
||||
export const MiddlePanel = styled.div`
|
||||
export const MiddlePanel = styled.div<{ compact?: boolean }>`
|
||||
width: calc(100% - ${props => props.theme.rightPanel.width});
|
||||
padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
|
||||
|
||||
${media.lessThan('medium', true)`
|
||||
${({ compact, theme }) =>
|
||||
media.lessThan('medium', true)`
|
||||
width: 100%;
|
||||
padding: ${props =>
|
||||
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
|
||||
padding: ${`${compact ? 0 : theme.spacing.sectionVertical}px ${
|
||||
theme.spacing.sectionHorizontal
|
||||
}px`};
|
||||
`};
|
||||
`;
|
||||
|
||||
|
|
|
@ -60,7 +60,7 @@ export class ContentItem extends React.Component<ContentItemProps> {
|
|||
}
|
||||
}
|
||||
|
||||
const middlePanelWrap = component => <MiddlePanel>{component}</MiddlePanel>;
|
||||
const middlePanelWrap = component => <MiddlePanel compact={true}>{component}</MiddlePanel>;
|
||||
|
||||
@observer
|
||||
export class SectionItem extends React.Component<ContentItemProps> {
|
||||
|
@ -71,7 +71,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
|
|||
return (
|
||||
<>
|
||||
<Row>
|
||||
<MiddlePanel>
|
||||
<MiddlePanel compact={level !== 1}>
|
||||
<Header>
|
||||
<ShareLink to={this.props.item.id} />
|
||||
{name}
|
||||
|
|
Loading…
Reference in New Issue
Block a user