From 6f6fe575e564897cf116baa7d401b7f83a1284a6 Mon Sep 17 00:00:00 2001 From: romanhotsiy Date: Tue, 13 Oct 2020 15:25:28 +0300 Subject: [PATCH] fix: make authorizations responseive too --- .../SecurityRequirement/SecurityRequirement.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/SecurityRequirement/SecurityRequirement.tsx b/src/components/SecurityRequirement/SecurityRequirement.tsx index e6aafb30..ef1bcaab 100644 --- a/src/components/SecurityRequirement/SecurityRequirement.tsx +++ b/src/components/SecurityRequirement/SecurityRequirement.tsx @@ -1,7 +1,7 @@ // import { transparentize } from 'polished'; import * as React from 'react'; -import styled from '../../styled-components'; +import styled, { media } from '../../styled-components'; import { Link, UnderlinedHeader } from '../../common-elements/'; import { SecurityRequirementModel } from '../../services/models/SecurityRequirement'; @@ -90,6 +90,9 @@ const AuthHeaderColumn = styled.div` const SecuritiesColumn = styled.div` width: ${props => props.theme.schema.defaultDetailsWidth}; + ${media.lessThan('small')` + margin-top: 10px; + `} `; const AuthHeader = styled(UnderlinedHeader)` @@ -101,6 +104,10 @@ const Wrap = styled.div` width: 100%; display: flex; margin: 1em 0; + + ${media.lessThan('small')` + flex-direction: column; + `} `; export interface SecurityRequirementsProps {