Fixed: api-details page breaks for long display name (#1884)

Author: malincrist

src/components/apis/details-of-api/ko/runtime/api-details.html

@@ -4,9 +4,9 @@
     <!-- /ko -->
 
     <!-- ko ifnot: working -->
-    <div class="flex-item flex-grow animation-fade-in">
+    <div class="flex-item flex-grow animation-fade-in col-md-auto">
         <!-- ko if: api -->
-        <h1>
+        <h1 class="text-wrap">
             <span data-bind="text: api().displayName"></span>
             <!-- ko if: api().type === 'soap' -->
             <span class="badge badge-soap">SOAP</span>
@@ -52,17 +52,17 @@ <h1>
 
         <!-- ko if: api().contact -->
         <h4>Contact</h4>
-            <!-- ko if: api().contact.name -->
-            <div data-bind="text: api().contact.name"></div>
-            <!-- /ko -->
+        <!-- ko if: api().contact.name -->
+        <div data-bind="text: api().contact.name"></div>
+        <!-- /ko -->
 
-            <!-- ko if: api().contact.email -->
-            <div><a data-bind="attr: { href: 'mailto:' + api().contact.email }, text: api().contact.email"></a></div>
-            <!-- /ko -->
+        <!-- ko if: api().contact.email -->
+        <div><a data-bind="attr: { href: 'mailto:' + api().contact.email }, text: api().contact.email"></a></div>
+        <!-- /ko -->
 
-            <!-- ko if: api().contact.url -->
-            <div><a data-bind="attr: { href: api().contact.url }, text: api().contact.url"></a></div>
-            <!-- /ko -->
+        <!-- ko if: api().contact.url -->
+        <div><a data-bind="attr: { href: api().contact.url }, text: api().contact.url"></a></div>
+        <!-- /ko -->
         <!-- /ko -->
 
         <!-- ko if: api().license -->

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

@@ -1,6 +1,6 @@
 <div class="form-group">
     <div class="input-group" tabindex="0" aria-label="APIs">
-        <div class="form-control" data-toggle="dropdown">
+        <div class="form-control text-truncate" data-toggle="dropdown">
             <span data-bind="text: selection"></span>
             <!-- ko if: selectedApi() -->
             <!-- ko if: selectedApi().type === 'soap' -->