fix: long paths break EndpointLink ui

Redocly · Feb 25, 2017 · 8472045 · 8472045
1 parent 7031176
commit 8472045
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/lib/components/EndpointLink/endpoint-link.html b/lib/components/EndpointLink/endpoint-link.html
@@ -3,10 +3,10 @@ <h5 class="http-verb" [ngClass]="verb">{{verb}}</h5>
   <span><!--
   --><span class="method-api-url-path">{{path}}</span><!--
 --></span>
-  <svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
-    <polygon fill="white" points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
-  </svg>
 </div>
+<svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
+  <polygon fill="white" points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
+</svg>
 <div class="servers-overlay" [@overlayExpand]="expanded ? 'expanded' : 'collapsed'">
   <div *ngFor="let server of servers" class="server-item">
     <div class="description" [innerHtml]="server.description | marked"></div>

diff --git a/lib/components/EndpointLink/endpoint-link.scss b/lib/components/EndpointLink/endpoint-link.scss
@@ -7,13 +7,14 @@
 }
 
 .method-endpoint {
-  padding: 10px 20px;
+  padding: 10px 30px 10px 20px;
   border-radius: $border-radius*2;
   background-color: darken($black, 2%);
   display: block;
   font-weight: $light;
   white-space: nowrap;
-  overflow-x: auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
   border: 1px solid transparent;
 }
 
@@ -82,10 +83,12 @@
   width: 20px;
   display: inline-block;
   float: right;
-  margin-top: 2px;
   background: darken($black, 2%);
   transform: rotateZ(0);
   transition: all 0.2s ease;
+  top: 15px;
+  right: 5px;
+  position: absolute;
 }
 
 :host.expanded {