added scrollable table example for alex

components/Table.jsx

@@ -25,11 +25,11 @@ const people = [
             </button>
           </div>
         </div>
-        <div className="mt-8 flex flex-col">
+        <div className="mt-8 flex flex-col ring-1 ring-red-600">
           <div className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
-                <table className="min-w-full divide-y divide-gray-300">
+                <table className="min-w-full w-fit divide-y divide-gray-300 ">
                   <thead className="bg-gray-50">
                     <tr>
                       <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">

components/primitives/Table.tsx

@@ -0,0 +1,61 @@
+import { styled } from '@stitches/react';
+
+const Shell = styled("div", {
+    width: "100%",
+    height: "fit-content",
+    display: "grid",
+    backgroundColor: "#F8F9FA",
+    // overflow: "clip",
+    gridTemplateRows: "auto 1fr",
+    gap: "24px"
+})
+
+const Heading = styled("p", {
+    width: "100%",
+    height: "fit-content",
+    color: "black",
+    fontSize: "32px"
+})
+
+const Data = styled("div", {
+    width: "100%",
+    overflowY: "scroll",
+    height: "fit-content",
+    display: "flex",
+    backgroundColor: "#F8F9FA",
+    gap: "8px",
+    boxShadow: "0 0 0 2px black",
+    borderRadius: "12px",
+    padding: "6px"
+})
+
+const Box = styled("div", {backgroundColor: "red", width: "200px", height: "200px", flexShrink: 0})
+
+
+
+function Table() {
+    return (
+        <Shell>
+            <Heading>Proxies</Heading>
+            <Data>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+                <Box/>
+            </Data>
+        </Shell>
+    )
+}
+
+export default Table

pages/index.tsx

@@ -5,8 +5,9 @@ import Form from '../components/Form';
 import LinkList from '../components/LinkList';
 import Box from '../components/primitives/Box';
 import * as Layout from '../components/primitives/Layout';
+import Table from '../components/primitives/Table';
 import Nav from '../components/SubNav';
-import Table from '../components/Table';
+// import Table from '../components/Table';
 
 export default function Home() {
   return (
@@ -20,7 +21,7 @@ export default function Home() {
         <Layout.Shell layout="control-panel">
             <Box css={{ boxShadow: "inset -1px 0px #E0E3E6" }}/>
             <Layout.Page>
-                <Layout.Section css={{ boxShadow: "inset 0px -1px #E0E3E6" }}>
+                <Layout.Section css={{ backgroundColor: "white", boxShadow: "inset 0px -1px #E0E3E6", position: "sticky", top: "0"}}>
                     <Layout.Content layout="full">
                         <Nav/>
                     </Layout.Content>