From 0f9bdf15535df85c822685be959cb6dc2f2149b4 Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Tue, 21 Feb 2023 11:27:53 +0000
Subject: [PATCH] Table sticky header, page 0 padding

---
 src/App.css       | 3 +++
 src/ImageItem.jsx | 1 -
 src/Thumbnail.jsx | 2 --
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 810e7bb..4814ee3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,6 +2,7 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  padding: 0;
 }
 
 table {
@@ -19,6 +20,8 @@ th {
   background-color: #f0f0f0;
   border: 1px solid #e0e0e0;
   border-bottom: 1px solid #111;
+  position: sticky;
+  top: 0;
 }
 
 td {
diff --git a/src/ImageItem.jsx b/src/ImageItem.jsx
index 0f147d6..1675d8c 100644
--- a/src/ImageItem.jsx
+++ b/src/ImageItem.jsx
@@ -108,7 +108,6 @@ export default function ImageItem({ source, zarr_columns }) {
   let wrapperStyle = {
     width: 150,
     height: 100,
-    position: "relative",
   };
 
   function renderColumn(col_name) {
diff --git a/src/Thumbnail.jsx b/src/Thumbnail.jsx
index 41456a3..de0845f 100644
--- a/src/Thumbnail.jsx
+++ b/src/Thumbnail.jsx
@@ -88,13 +88,11 @@ export default function Thumbnail({ source, attrs }) {
   }, []);
 
   return (
-    <div>
       <canvas
         style={{ maxWidth: 100, maxHeight: 100 }}
         ref={canvas}
         height={canvasSize.height}
         width={canvasSize.width}
       />
-    </div>
   );
 }