Current issue is that our timezone can sometimes be too long to fit inside a MatchCard component.

Proposing to breakdown the timezone into two segments so that they can be rendered as:

One approach would be to splice the timezone value and splitting them in the MatchCard component.
|
<small className="text-muted">{timezone}</small> |
For example, if timezone returns the value of
'(GMT-12:00) International Date Line West'
use JS to split at ) (or use regex to split the value from (...) and everything else) so that we can add a break in between in the MatchCard render function:
render () {
...
<Card.Footer>
<small className="text-muted">{timezone[0]}</small>
<small className="text-muted">{timezone[1]}</small>
</Card.Footer>
}
where timezone is now an array of ['(GMT-12:00)', 'International Date Line West']
--
A second approach would be to refactor the entries file so that the timezones are already split accordingly:

Current issue is that our timezone can sometimes be too long to fit inside a MatchCard component.

Proposing to breakdown the timezone into two segments so that they can be rendered as:

One approach would be to splice the
timezonevalue and splitting them in the MatchCard component.cb-connect/imports/ui/components/dashboard/match_card.jsx
Line 35 in c8d179b
For example, if
timezonereturns the value ofuse JS to split at
)(or use regex to split the value from(...)and everything else) so that we can add a break in between in the MatchCard render function:where
timezoneis now an array of['(GMT-12:00)', 'International Date Line West']--
A second approach would be to refactor the entries file so that the timezones are already split accordingly: