From e6af858b1aa09f23feb561d4e87a97c5b50010e1 Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Sun, 1 Jan 2017 21:26:23 +0100
Subject: [PATCH] make link to feature toggle span full width of list

---
 .../feature/feature-list-item-component.jsx   | 20 +++++++++----------
 frontend/src/component/feature/feature.scss   |  6 ------
 .../src/component/feature/list-component.jsx  |  2 +-
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index 3e3c5f4ead..3a2cd7f783 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -32,7 +32,7 @@ const Feature = ({
 
     return (
         <li key={name} className="mdl-list__item">
-            <span className="mdl-list__item-primary-content">
+            <span className="mdl-list__item-secondary-action">
                 <div style={{ width: '40px', textAlign: 'center' }}>
                     {
                         isStale ?
@@ -44,23 +44,23 @@ const Feature = ({
                             </div>
                     }
                 </div>
-
-                &nbsp;
-                <span style={{ display: 'inline-block', width: '45px' }} title={`Toggle ${name}`}>
-                    <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
-                </span>
-                <Link to={`/features/view/${name}`} className={style.link}>
+            </span>
+            <span className="mdl-list__item-secondary-action" style={{ width: '45px' }} title={`Toggle ${name}`}>
+                <Switch title="test" key="left-actions" onChange={() => onFeatureClick(feature)} checked={enabled} />
+            </span>
+            <span className="mdl-list__item-primary-content">
+                <Link to={`/features/view/${name}`} className={style.link} style={{ display: 'inline-block', width: '100%' }}>
                     {shorten(name, 50)} <small className={style.hideLt960}>{shorten(description, 30) || ''}</small>
                 </Link>
             </span>
-
-            <span className={style.iconList} >
+            <span className="mdl-list__item-secondary-action">
                 {strategies && strategies.map((s, i) => <Chip className={[style.iconListItemChip, style.hideLt960].join(' ')} key={i}>
                     <small>{s.name}</small>
                 </Chip>)}
+            </span>
+            <span className="mdl-list__item-secondary-action">
                 <IconButton name="delete" onClick={removeToggle} className={style.iconListItem} />
             </span>
-
         </li>
     );
 };
diff --git a/frontend/src/component/feature/feature.scss b/frontend/src/component/feature/feature.scss
index d63267cfbd..b10562ea26 100644
--- a/frontend/src/component/feature/feature.scss
+++ b/frontend/src/component/feature/feature.scss
@@ -25,12 +25,7 @@
     color: #000;
 }
 
-.iconList {
-    display: flex;
-}
-
 .iconListItem {
-    flex: 1;
     color: #bbb !important;
 }
 .iconListItem *:hover {
@@ -38,7 +33,6 @@
 }
 
 .iconListItemChip {
-    flex: 1;
     margin-left: 5px !important;
 }
 
diff --git a/frontend/src/component/feature/list-component.jsx b/frontend/src/component/feature/list-component.jsx
index 87219dc1c0..625fe0d8b8 100644
--- a/frontend/src/component/feature/list-component.jsx
+++ b/frontend/src/component/feature/list-component.jsx
@@ -97,7 +97,7 @@ export default class FeatureListComponent extends React.PureComponent {
                     </Link>
                 </div>
 
-                <ul className="demo-list-item mdl-list">
+                <ul className="mdl-list">
                     {features.map((feature, i) =>
                         <Feature key={i}
                             settings={settings}