Added margins to videos and added scroll to party video

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} />

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>
   );
 }
 

src/components/Tokens.js

@@ -25,7 +25,7 @@ function Tokens({ onCreateMapToken }) {
           width: "80px",
           minWidth: "80px",
           flexDirection: "column",
-          overflow: "auto"
+          overflowY: "auto"
         }}
         px={2}
       >