From 46199395ba0f8ed880b0fc95a9b11fe14ab31f3f Mon Sep 17 00:00:00 2001
From: GotthardG <51994228+GotthardG@users.noreply.github.com>
Date: Thu, 5 Dec 2024 19:26:49 +0100
Subject: [PATCH] more infos on the sample tracker

---
 frontend/src/App.css                      | 25 ++++++++++++++++-------
 frontend/src/components/SampleTracker.tsx | 10 +++++----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 5fc2380..a1942fd 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -64,9 +64,8 @@
 }
 
 .sample-tracker {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  border: 1px solid #ddd; /* Optional: border around the box */
+  border-radius: 5px; /* Optional: rounded corners for the entire box */
 }
 
 .pucks-container {
@@ -84,15 +83,17 @@
 
 .puck-label {
   display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  flex-direction: column-reverse;
+  justify-content: flex-start;
   align-items: center;
   height: 100px;
   margin-bottom: 5px;
 }
 
 .puck-label span {
-  display: block;
+  display: block;  /* Continue displaying each letter as a block to allow individual rotation */
+  transform: rotate(-90deg); /* Rotate each letter by -90 degrees */
+  margin: 2px 0; /* Add some margin to give space between letters */
 }
 
 .samples {
@@ -108,4 +109,14 @@
   border-radius: 50%;
   display: inline-block;
   border: 1px solid lightgray;
-}
\ No newline at end of file
+}
+
+.header-band {
+  background-color: #007bff; /* Replace with desired color */
+  color: white; /* Text color */
+  padding: 2px 5px; /* Adjust vertical padding to reduce thickness */
+  text-align: center; /* Center the text */
+  border-radius: 5px 5px 0 0; /* Rounded corners for the top */
+  font-size: 12px; /* Adjust text size if needed */
+}
+
diff --git a/frontend/src/components/SampleTracker.tsx b/frontend/src/components/SampleTracker.tsx
index 73d14dd..5f8c5f4 100644
--- a/frontend/src/components/SampleTracker.tsx
+++ b/frontend/src/components/SampleTracker.tsx
@@ -68,16 +68,18 @@ const SampleTracker: React.FC = () => {
     return 'Pending';
   };
 
-  return (
+    return (
     <div className="sample-tracker-container">
       <div className="sample-tracker">
-        <h2>All Pucks and Samples</h2>
+        <div className="header-band">
+          <h2>Sample Tracker</h2>
+        </div>
         <div className="pucks-container">
           {pucks.map((puck) => (
             <div key={puck.id} className="puck-column">
-              <div className="puck-label" style={{fontSize: '16px'}}>
+              <div className="puck-label" style={{fontSize: '6px'}}>
                 {puck.puck_name.split('').map((char, i) => (
-                    <span key={i} style={{fontSize: '12px'}}>{char}</span>
+                    <span key={i} style={{fontSize: '10px'}}>{char}</span>
                 ))}
               </div>
               <div className="samples">