From 87fe8f5c66971dc6209f96d57c7f3f7484fe66d7 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Sat, 10 Dec 2016 15:39:03 +0100
Subject: [PATCH] shorten description with ellipse

---
 .../src/component/application/application-edit-component.js   | 4 +++-
 frontend/src/component/common/index.js                        | 4 +++-
 .../src/component/feature/feature-list-item-component.jsx     | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index b4287dd09b..53e0b73c63 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -15,7 +15,9 @@ class StatefulTextfield extends Component {
     }
 
     render () {
-        return (<Textfield label={this.props.label}
+        return (<Textfield
+            style={{ width: '100%' }}
+            label={this.props.label}
             floatingLabel
             rows={this.props.rows}
             value={this.state.value}
diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
index 04b79c0952..a495e04f0d 100644
--- a/frontend/src/component/common/index.js
+++ b/frontend/src/component/common/index.js
@@ -6,11 +6,13 @@ const {
 } = require('react-mdl');
 const { Link } = require('react-router');
 
+export const shorten = (str, len = 50) => (str && str.length > len ? `${str.substring(0, len)}...` : str);
+
 export const AppsLinkList = ({ apps }) => (
     <List style={{ textAlign: 'left' }}>
     {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
         <ListItem twoLine key={appName}>
-            <ListItemContent avatar={icon} subtitle={description}>
+            <ListItemContent avatar={icon} subtitle={shorten(description)}>
                 <Link key={appName} to={`/applications/${appName}`}>
                     {appName}
                 </Link>
diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index dd8f9f69f6..4273601693 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 import { Chip, Switch, Icon, IconButton } from 'react-mdl';
 import percentLib from 'percent';
 import Progress from './progress';
+import { shorten } from '../common';
 
 import style from './feature.scss';
 
@@ -41,7 +42,7 @@ const Feature = ({
                     <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
                 </span>
                 <Link to={`/features/edit/${name}`} className={style.link}>
-                    {name} <small>{(description && description.substring(0, 30)) || ''}</small>
+                    {name} <small>{shorten(description, 30) || ''}</small>
                 </Link>
             </span>