From 25109e3cbb05bfa84e4baa03c5872fd89bd46a7a Mon Sep 17 00:00:00 2001
From: "@mas764" <mas764@cornell.edu>
Date: Sat, 20 Jun 2020 11:22:56 -0400
Subject: [PATCH] feat: start viewport boxes

---
 plugins/viewport-plugin/src/index.tsx | 45 +++++++++++++++++++++------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/plugins/viewport-plugin/src/index.tsx b/plugins/viewport-plugin/src/index.tsx
index 786f82fd8..85abc0ef0 100644
--- a/plugins/viewport-plugin/src/index.tsx
+++ b/plugins/viewport-plugin/src/index.tsx
@@ -4,18 +4,43 @@ import { Box, jsx } from 'theme-ui';
 
 export const ViewportBlock: FC = () => {
   return (
-    <div>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        minHeight: '200px',
+        height: '100%',
+        width: '100%',
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        padding: '3px',
+        background: '#f4f4f4',
+      }}
+    >
       <Box
-        color="black"
-        bg="#e6e5e5"
-        p={40}
         sx={{
-          width: '2000px',
-          height: '300px',
+          height: '100%',
+          minWidth: '250px',
+          margin: '20px',
+          background: 'gray',
         }}
-      >
-        content here
-      </Box>
-    </div>
+      ></Box>
+      <Box
+        sx={{
+          height: '100%',
+          minWidth: '500px',
+          margin: '20px',
+          background: 'gray',
+        }}
+      ></Box>
+      <Box
+        sx={{
+          height: '100%',
+          minWidth: '900px',
+          margin: '20px',
+          background: 'gray',
+        }}
+      ></Box>
+    </Box>
   );
 };