fix(plan): Plan description is truncated

fix gravitee-io/issues#941

src/portal/api/plan/_api-plan.scss

@@ -45,6 +45,13 @@
   }
 }
 
+.pricing-content{
+  min-height: 293px;
+  max-height: 293px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .pricing-wrapper {
   padding: 0 10px;
   position: relative;
@@ -146,12 +153,11 @@
 }
 
 .pricing-description {
-  display: block;
-  overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: normal;
   margin: 0 auto;
   max-width: 210px;
+  max-height: 230px;
 }
 
 .pricing-body {

src/portal/api/plan/api-plans.component.ts

@@ -13,12 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import _ = require('lodash');
+
 const ApiPlansComponent: ng.IComponentOptions = {
   bindings: {
     plans: '<',
     isAuthenticated: '<'
   },
-  template: require('./api-plans.html')
+  template: require('./api-plans.html'),
+  controller: function() {
+    'ngInject';
+    const vm = this;
+
+    vm.getCharacteristicsRange = function (plan) {
+      return _.range(_.min([6, plan.characteristics.length]));
+    };
+  }
 };
 
 export default ApiPlansComponent;

src/portal/api/plan/api-plans.html

@@ -30,19 +30,20 @@ <h2 class="section-title color-white" translate="api.plan.title">Plans</h2>
           <li class="is-visible gravitee-card">
             <h2>{{::plan.name}}</h2>
             <div class="pricing-validation">{{plan.validation === 'manual'? ('api.plan.manual' | translate): '&nbsp;'}}</div>
+            <div class="pricing-content">
             <header class="pricing-header">
               <div class="price">
                 <span class="md-headline pricing-description">
-                  <md-tooltip>{{::plan.description}}</md-tooltip>
                   {{::plan.description}}
                 </span>
               </div>
             </header>
             <div class="pricing-body">
               <ul class="pricing-features">
-                <li ng-repeat="i in [0, 1, 2, 3, 4, 5]">{{plan.characteristics[i]? plan.characteristics[i] : '&nbsp;'}}</li>
+                <li ng-repeat="i in $ctrl.getCharacteristicsRange(plan)">{{plan.characteristics[i]? plan.characteristics[i] : '&nbsp;'}}</li>
               </ul>
             </div>
+            </div>
             <footer class="pricing-footer" ng-if="$ctrl.isAuthenticated">
               <a class="select" ui-sref="portal.api.subscribe({planId: plan.id})">{{'api.plan.subscribe' | translate}}</a>
             </footer>