more infos on the sample tracker

frontend/src/App.css

@@ -64,9 +64,8 @@
 }
 
 .sample-tracker {
-  display: flex;
+  border: 1px solid #ddd; /* Optional: border around the box */
-  flex-direction: column;
+  border-radius: 5px; /* Optional: rounded corners for the entire box */
-  align-items: center;
 }
 
 .pucks-container {
@@ -84,15 +83,17 @@
 
 .puck-label {
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
-  justify-content: flex-end;
+  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 {
@@ -109,3 +110,13 @@
   display: inline-block;
   border: 1px solid lightgray;
 }
+
+.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 */
+}
+

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">