From 75f26eb42bb240f8b20a6a422aea8c877aa94fe9 Mon Sep 17 00:00:00 2001
From: Bowen Zhang <bowen@bohdi.network>
Date: Mon, 17 Jun 2019 14:48:12 -0700
Subject: [PATCH] Fix #1484 show full title on signle column

---
 src/components/EventCard/index.js  | 48 ++++++++++++++++--------------
 src/components/EventCard/styles.js | 17 +++++++++++
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/EventCard/index.js b/src/components/EventCard/index.js
index 7cbcfab54..dee5ed0f1 100644
--- a/src/components/EventCard/index.js
+++ b/src/components/EventCard/index.js
@@ -81,34 +81,36 @@ export default class EventCard extends Component {
           <Card className={classes.eventCard} onClick={onClick}>
             <div className={cx(classes.eventCardBg, `bg${index % 8}`)}></div>
             <div className={cx(classes.eventCardSection, 'top')}>
-              {isPending() && status !== WITHDRAWING && <EventWarning id="str.pendingConfirmation" message="Pending Confirmation" />}
-              {isPending() && status === WITHDRAWING && <EventWarning id="str.withdrawing" message="Withdrawning" type={EventWarningType.INFO} />}
-              {this.isWithdrawn && <EventWarning id="str.withdrawn" message="Withdrawn" type={EventWarningType.INFO} />}
-              <div className={classes.stateText}><FormattedMessageFixed id={messages[getEventDesc(event, currentAddress)].id} defaultMessage={messages[getEventDesc(event, currentAddress)].defaultMessage} /></div>
-              <div className={classes.eventCardNameBundle}>
-                <div className={classes.eventCardNameFlex}>
-                  <Typography variant="h6" className={classes.eventCardName}>
-                    {name}
-                  </Typography>
-                </div>
-                <FavoriteButton eventAddress={address} />
-              </div>
-              <div className={classes.eventCardNameBundle}>
-                <div className={classes.eventCardNameFlex}>
-                  <div className={classes.eventCardInfoItem}>
-                    <FormattedMessage id='str.arbitrationReward' defaultMessage='Arbitration Reward' />{`: ${arbitrationRewardPercentage}%`}
-                  </div>
-                  <div className={classes.eventCardInfoItem}>
-                    <RaisedAmount amount={totalBets} />
+              <div className={classes.upper}>
+                {isPending() && status !== WITHDRAWING && <EventWarning id="str.pendingConfirmation" message="Pending Confirmation" />}
+                {isPending() && status === WITHDRAWING && <EventWarning id="str.withdrawing" message="Withdrawning" type={EventWarningType.INFO} />}
+                {this.isWithdrawn && <EventWarning id="str.withdrawn" message="Withdrawn" type={EventWarningType.INFO} />}
+                <div className={classes.stateText}><FormattedMessageFixed id={messages[getEventDesc(event, currentAddress)].id} defaultMessage={messages[getEventDesc(event, currentAddress)].defaultMessage} /></div>
+                <div className={classes.eventCardNameBundle}>
+                  <div className={classes.eventCardNameFlex}>
+                    <Typography variant="h6" className={classes.eventCardName}>
+                      {name}
+                    </Typography>
                   </div>
+                  <FavoriteButton eventAddress={address} />
                 </div>
-                <div className={classes.eventCardInfo}>
-                  <div className={classes.eventCardInfoItem}>
-                    {getEndTime() && <TimeCorner endTime={getEndTime()} />}
+                <div className={classes.eventCardNameBundle}>
+                  <div className={classes.eventCardNameFlex}>
+                    <div className={classes.eventCardInfoItem}>
+                      <FormattedMessage id='str.arbitrationReward' defaultMessage='Arbitration Reward' />{`: ${arbitrationRewardPercentage}%`}
+                    </div>
+                    <div className={classes.eventCardInfoItem}>
+                      <RaisedAmount amount={totalBets} />
+                    </div>
+                  </div>
+                  <div className={classes.eventCardInfo}>
+                    <div className={classes.eventCardInfoItem}>
+                      {getEndTime() && <TimeCorner endTime={getEndTime()} />}
+                    </div>
                   </div>
                 </div>
               </div>
-              <div className={classes.alignBottom}>
+              <div>
                 {this.renderOptions()}
               </div>
             </div>
diff --git a/src/components/EventCard/styles.js b/src/components/EventCard/styles.js
index 161179f0b..cf28dacc1 100644
--- a/src/components/EventCard/styles.js
+++ b/src/components/EventCard/styles.js
@@ -18,6 +18,9 @@ const styles = (theme) => ({
     padding: theme.padding.space3X.px,
     '&.top': {
       height: '400px',
+      [theme.breakpoints.down('xs')]: {
+        height: 'auto',
+      },
     },
     '&.button': {
       textAlign: 'center',
@@ -27,6 +30,9 @@ const styles = (theme) => ({
       fontSize: theme.sizes.font.small,
       color: theme.palette.text.primary,
     },
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
   },
   dashboardTime: {
     color: theme.palette.text.hint,
@@ -47,6 +53,14 @@ const styles = (theme) => ({
     fontSize: '1.05rem',
     textAlign: 'left',
     whiteSpace: 'nowrap',
+    [theme.breakpoints.down('xs')]: {
+      maxHeight: 'none',
+      overflow: 'visible',
+      textOverflow: 'clip',
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+      textAlign: 'justify',
+    },
   },
   eventCardNameBundle: {
     display: 'flex',
@@ -86,6 +100,9 @@ const styles = (theme) => ({
   eventCardInfoItem: {
     padding: `${theme.padding.spaceX.px} 0px 0px`,
   },
+  upper: {
+    marginBottom: theme.padding.space12X.px,
+  },
 });
 
 export default styles;