fix long gang name bug

client/src/App.css

@@ -58,4 +58,19 @@
 
 .bump {
   margin-left: 2em;
+}
+
+.overflow {
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.no-overflow {
+  white-space: nowrap;
 }

client/src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import './App.css';
-import { Navbar, Dropdown, Icon } from 'react-materialize';
+import { Navbar, Dropdown, Button } from 'react-materialize';
 import Flow from "./homies/Flow";
 import Cash from './cash/Cash';
 import Homies from './homies/Homies';
@@ -77,9 +77,17 @@ const App = (props) => {
     </div>
   );
 
+  const gangName = () => {
+    if (selectedGang && selectedGang.name && selectedGang.name.length > 0){
+      return selectedGang.name;
+    }
+
+    return '[No name]';
+  }
+
   const navbarLogoWithGang = (
     <div>
-      <RoutableNavItem href={CRIB}><a href="#">GKS</a></RoutableNavItem>
+      <RoutableNavItem additionalClasses="clickable" href={CRIB}>GKS</RoutableNavItem>
 
       <Dropdown
         id="gang_dropdown"
@@ -87,13 +95,13 @@ const App = (props) => {
           alignment: 'left',
           autoTrigger: true,
           closeOnClick: true,
-          constrainWidth: true,
+          constrainWidth: false,
           coverTrigger: false,
           hover: false,
           inDuration: 150,
           outDuration: 250
         }}
-        trigger={<a className="bump">{selectedGang && selectedGang.name && selectedGang.name.length > 0 ? `${selectedGang.name} gang` : '[No name gang]'}<Icon right>arrow_drop_down</Icon></a>}
+        trigger={<Button className="bump"><div className="overflow">{gangName()}</div></Button>}
       >
         {gangs.map(gang => <a key={`gang-${gang.id}`} onClick={() => setSelectedGang(gang)}>{gang.name}</a>)}
       </Dropdown>
@@ -104,7 +112,7 @@ const App = (props) => {
   return (
     <Router>
       <div className="navbar-fixed">
-        <Navbar brand={navbarLogoWithGang} alignLinks="right">
+        <Navbar className="no-overflow" brand={navbarLogoWithGang} alignLinks="right">
           <RoutableNavItem href={CRIB}>
             Crib
           </RoutableNavItem>

client/src/cash/Cash.js

@@ -26,7 +26,7 @@ const Cash = (props) => {
     return (
       <tr key={homieLine.homie.id}>
         <td className="cash-cell-left">
-          <RoutableNavItem href={`/homie/${homieLine.homie.id}/flow`}><a href="#">{homieLine.homie.name}</a></RoutableNavItem>
+          <a href="#" onClick={() => props.history.push(`/homie/${homieLine.homie.id}/flow`)}>{homieLine.homie.name}</a>
         </td>
         <td className="cash-cell-left">
           { formatTime(homieLine.work) }