Selectable: remove border box

webapp/src/container/games/view/GameSelector.css

@@ -3,13 +3,25 @@
     overflow-y: scroll;
 }
 
-.Selectable {
+hr {
-    border: 1px solid black;
+    border: 0;
-    margin-bottom: 5px;
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+
+    margin-bottom: 2px;
+    margin-top: 3px;
 }
 
 .Selectable q {
     color: gray;
+    font-size: 70%;
+
+    max-width: 250px;
+    display: block;
+    white-space: nowrap;
+    overflow: scroll;
+    padding-bottom: 2px;
 }
 
 .Selectable i {
@@ -20,20 +32,14 @@
 
 .Selectable:hover {
     background-color: #d3d3d360;
-}
+    border-radius: 2px;
 
-/* .Games .li button.action {
-    display: none;
 }
 
-.Games .li:hover button.action {
-    display: initial;
-} */
-
 .Separator {
     /* width: 20%;  */
     /* height: 20px;  */
-    border-bottom: 1px dotted black; 
+    border-bottom: 1px dotted black;
     text-align: center;
     font-size: 50%;
     padding-left: 50%;
@@ -45,4 +51,4 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-}
+}

webapp/src/container/games/view/GameSelector.jsx

@@ -32,13 +32,16 @@ function Selectable({ game, onClick }) {
     const opponentName = game.opponentName;
 
     return (
-        <div className='Selectable' onClick={() => onClick(game.uuid)}>
+        <div >
-            <div className='Title'>
+            <div className='Selectable' onClick={() => onClick(game.uuid)}>
-                <Player color={myColor} />
+                <div className='Title'>
-                <i>vs</i>
+                    <Player color={myColor} />
-                <Player color={opponentColor} name={opponentName} />
+                    <i>vs</i>
+                    <Player color={opponentColor} name={opponentName} />
+                </div>
+                <q>{game.message}</q>
             </div>
-            <q>{game.message}</q>
+            <hr />
         </div>
     )
 };