"Fix" long name handling on scoreboard

client/src/components/screens/GameSummary/ScoreBoard/ScoreBoard.jsx

@@ -1,10 +1,13 @@
 import flagLookup from '../../../../domain/flagLookup';
 import styles from './ScoreBoard.module.css';
 
+// since everyone wants to use giant names...
+const nameLineWidthGuess = 25;
+
 const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
   <div className={styles.tile}>
     <div className={styles.header}>
-      <span className={styles.name}>{name}</span>
+      <span className={`${styles.name} ${name.length > nameLineWidthGuess ? styles.longname : ''}`}>{name}</span>
       <span className={styles.total}>{winner && '🏆'} {totalScore}</span>
     </div>
     <div className={styles.scores}>

client/src/components/screens/GameSummary/ScoreBoard/ScoreBoard.module.css

@@ -4,9 +4,10 @@
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: flex-start;
-  align-content: space-around;
   max-width: 80%;
-  margin-top: 2em;
+  height: 80%;
+  margin-top: 3em;
+  padding-bottom: 32px;
 }
 
 .tile {
@@ -14,7 +15,7 @@
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   min-width: 12em;
   padding-left: 8px;
   padding-right: 8px;
@@ -24,19 +25,23 @@
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
+  height: 1.5em;
   width: 100%;
   border-bottom: 2px solid #eee;
 }
 
 .name {
-  font-size: 1.4em;
+  font-size: 1.3em;
   font-weight: 800;
   padding-left: .1em;
-  max-width: 65%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 75%;
+  word-break: break-all;
+}
+
+.longname {
+  font-size: 0.2em;
+  z-index: -1;
 }
 
 .total {