fix: long endpoint url overflow

This commit is contained in:
Roman Hotsiy 2018-07-31 16:14:12 +03:00
parent a4f79bf8c2
commit d99e9188fd
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0

View File

@ -9,16 +9,18 @@ export const OperationEndpointWrap = styled.div`
export const ServerRelativeURL = styled.span` export const ServerRelativeURL = styled.span`
font-family: ${props => props.theme.typography.headings.fontFamily}; font-family: ${props => props.theme.typography.headings.fontFamily};
margin-left: 10px; margin-left: 10px;
flex: 1;
overflow-x: hidden;
text-overflow: ellipsis;
`; `;
export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)` export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')}; padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')}; border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
background-color: ${props => (props.inverted ? 'transparent' : '#222d32')}; background-color: ${props => (props.inverted ? 'transparent' : '#222d32')};
display: block; display: flex;
white-space: nowrap; white-space: nowrap;
overflow-x: hidden; align-items: center;
text-overflow: ellipsis;
border: ${props => (props.inverted ? '0' : '1px solid transparent')}; border: ${props => (props.inverted ? '0' : '1px solid transparent')};
border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')}; border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
transition: border-color 0.25s ease; transition: border-color 0.25s ease;