fix: long endpoint url overflow

Redocly · Jul 31, 2018 · d99e918 · d99e918
1 parent a4f79bf
commit d99e918
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
@@ -9,16 +9,18 @@ export const OperationEndpointWrap = styled.div`
 export const ServerRelativeURL = styled.span`
   font-family: ${props => props.theme.typography.headings.fontFamily};
   margin-left: 10px;
+  flex: 1;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
 `;
 
 export const EndpointInfo = withProps<{ expanded?: boolean; inverted?: boolean }>(styled.div)`
   padding: 10px 30px 10px ${props => (props.inverted ? '10px' : '20px')};
   border-radius: ${props => (props.inverted ? '0' : '4px 4px 0 0')};
   background-color: ${props => (props.inverted ? 'transparent' : '#222d32')};
-  display: block;
+  display: flex;
   white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
+  align-items: center;
   border: ${props => (props.inverted ? '0' : '1px solid transparent')};
   border-bottom: ${props => (props.inverted ? '1px solid #ccc' : '0')};
   transition: border-color 0.25s ease;