⬆️ Max Height Market

actuallyReallyAlex · Sep 25, 2019 · f352062 · f352062
1 parent 5936ae3
commit f352062
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/src/App.js b/src/App.js
@@ -19,7 +19,10 @@ const App = ({ handleInitializeApplication, planets }) => {
   return (
     <Box fill>
       <ViewSpeeddial />
-      <Box pad={{ left: '100px', top: '25px', right: '25px', bottom: '25px' }}>
+      <Box
+        pad={{ left: '100px', top: '25px', right: '25px', bottom: '25px' }}
+        style={{ maxHeight: '100vh', overflow: 'auto' }}
+      >
         <View />
       </Box>
     </Box>

diff --git a/src/components/ItemCard.js b/src/components/ItemCard.js
@@ -6,7 +6,7 @@ const ItemCard = ({ item }) => {
   const currentItem = itemList.find(({ name }) => name === item)
   const Icon = currentItem.icon
   return (
-    <Card>
+    <Card style={{ position: 'sticky', top: '0', zIndex: '1' }}>
       <CardContent>
         <Box
           alignItems="center"

diff --git a/src/components/MarketTable.js b/src/components/MarketTable.js
@@ -46,9 +46,9 @@ const MarketTable = ({ data, item }) => {
   }
 
   return (
-    <Paper style={{ width: '100%' }}>
+    <Paper style={{ overflow: 'auto', width: '100%' }}>
       <ItemCard item={item} />
-      <Table>
+      <Table stickyHeader>
         <TableHead>
           <TableRow>
             <TableCell>Name</TableCell>

diff --git a/src/index.css b/src/index.css
@@ -16,3 +16,7 @@ body {
 .node-container:hover {
   cursor: pointer;
 }
+
+.MuiTableCell-stickyHeader {
+  top: 104px !important;
+}