From a75cbb0c5607255381e8f8c16234b75dcac55f81 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 20 Mar 2020 13:44:22 +1100
Subject: [PATCH] Added margins to videos and added scroll to party video

---
 src/components/Party.js      |  7 ++++++-
 src/components/PartyVideo.js | 15 +++++++++------
 src/components/Tokens.js     |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/Party.js b/src/components/Party.js
index c11cbd6..51dcea5 100644
--- a/src/components/Party.js
+++ b/src/components/Party.js
@@ -10,7 +10,12 @@ function Party({ streams, localStreamId }) {
     <Flex
       p={3}
       bg="background"
-      sx={{ flexDirection: "column", width: "192px", minWidth: "192px" }}
+      sx={{
+        flexDirection: "column",
+        width: "192px",
+        minWidth: "192px",
+        overflowY: "auto"
+      }}
     >
       {Object.entries(streams).map(([id, stream]) => (
         <PartyVideo key={id} stream={stream} muted={id === localStreamId} />
diff --git a/src/components/PartyVideo.js b/src/components/PartyVideo.js
index 8708257..1a80c72 100644
--- a/src/components/PartyVideo.js
+++ b/src/components/PartyVideo.js
@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from "react";
+import { Box } from "theme-ui";
 
 function PartyVideo({ stream, muted }) {
   const videoRef = useRef();
@@ -10,12 +11,14 @@ function PartyVideo({ stream, muted }) {
   }, [stream]);
 
   return (
-    <video
-      ref={videoRef}
-      autoPlay
-      muted={muted}
-      style={{ width: "100%", borderRadius: "4px" }}
-    />
+    <Box my={1}>
+      <video
+        ref={videoRef}
+        autoPlay
+        muted={muted}
+        style={{ width: "100%", borderRadius: "4px" }}
+      />
+    </Box>
   );
 }
 
diff --git a/src/components/Tokens.js b/src/components/Tokens.js
index 9d3f39c..6fb8682 100644
--- a/src/components/Tokens.js
+++ b/src/components/Tokens.js
@@ -25,7 +25,7 @@ function Tokens({ onCreateMapToken }) {
           width: "80px",
           minWidth: "80px",
           flexDirection: "column",
-          overflow: "auto"
+          overflowY: "auto"
         }}
         px={2}
       >