From 4ca753f38fd58e4545e203aa9a6c4155e03de9be Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Fri, 19 Oct 2018 12:50:44 +0100
Subject: [PATCH] Trim text on widget

---
 embark-ui/src/components/Processes.js |  2 +-
 embark-ui/src/components/Widget02.js  | 18 ++----------------
 2 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/embark-ui/src/components/Processes.js b/embark-ui/src/components/Processes.js
index 59bed6af..9379cf01 100644
--- a/embark-ui/src/components/Processes.js
+++ b/embark-ui/src/components/Processes.js
@@ -19,7 +19,7 @@ function iconClasses(state){
 }
 
 const Process = ({process}) => (
-  <Col sm={6} lg={2}>
+  <Col xs={12} sm={6} md={4} xl={3}>
     <Widget02 header={process.name} mainText={process.description} icon={iconClasses(process.state)} color={colorClasses(process.state)} variant="1" />
   </Col>
 );
diff --git a/embark-ui/src/components/Widget02.js b/embark-ui/src/components/Widget02.js
index 2f42e24b..c5110d8c 100644
--- a/embark-ui/src/components/Widget02.js
+++ b/embark-ui/src/components/Widget02.js
@@ -10,8 +10,6 @@ const propTypes = {
   icon: PropTypes.string,
   color: PropTypes.string,
   variant: PropTypes.string,
-  footer: PropTypes.bool,
-  link: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   cssModule: PropTypes.object,
@@ -46,25 +44,13 @@ class Widget02 extends Component {
       return (<i className={classes}></i>);
     };
 
-    const cardFooter = function () {
-      if (footer) {
-        return (
-          <CardFooter className="px-3 py-2">
-            <a className="font-weight-bold font-xs btn-block text-muted" href={link}>View More
-              <i className="fa fa-angle-right float-right font-lg"></i></a>
-          </CardFooter>
-        );
-      }
-    };
-
     return (
       <Card>
         <CardBody className={card.classes} {...attributes}>
           {blockIcon(card.icon)}
-          <div className={lead.classes}>{header}</div>
-          <div className="text-muted text-uppercase font-weight-bold font-xs">{mainText}</div>
+          <p className={lead.classes}>{header}</p>
+          <p className="mb-0 text-truncate text-muted text-uppercase font-weight-bold font-xs">{mainText}</p>
         </CardBody>
-        {cardFooter()}
       </Card>
     );
   }