From e67fb399cd0da35cd66806667000a74181fd1320 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Sat, 16 Nov 2024 23:36:28 +0200
Subject: [PATCH] try to make sticky table headers (wip)

---
 pages/cart/reports/coverMe.tsx | 14 +++++++-------
 styles/styles.css              | 28 +++++++++++-----------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/pages/cart/reports/coverMe.tsx b/pages/cart/reports/coverMe.tsx
index 06557dc..3104c46 100644
--- a/pages/cart/reports/coverMe.tsx
+++ b/pages/cart/reports/coverMe.tsx
@@ -142,14 +142,14 @@ export default function EventLogList() {
                             ))}
                         </div>
                         <div className="mt-4 w-full overflow-x-auto">
-                            <table className="w-full table-auto">
-                                <thead>
+                            <table className="w-full table-auto border-collapse">
+                                <thead className="bg-gray-100">
                                     <tr>
-                                        <th className="px-4 py-2 text-left">На</th>
-                                        <th className="px-4 py-2 text-left">От</th>
-                                        <th className="px-4 py-2 text-left">Дата</th>
-                                        <th className="px-4 py-2 text-left">Смяна</th>
-                                        <th className="px-4 py-2 text-left">Събитие</th>
+                                        <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">На</th>
+                                        <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">От</th>
+                                        <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Дата</th>
+                                        <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Смяна</th>
+                                        <th className="px-4 py-2 text-left sticky top-0 z-10 bg-gray-100 border">Събитие</th>
                                     </tr>
                                 </thead>
                                 <tbody>
diff --git a/styles/styles.css b/styles/styles.css
index b924acf..1b136bb 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -2,7 +2,9 @@
   box-sizing: border-box;
 } */
 body {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   padding: 0 1rem 1rem 1rem;
   max-width: 768px;
   margin: 0 auto;
@@ -52,7 +54,7 @@ iframe {
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  
+
   z-index: 1051; /* High z-index */
 }
 
@@ -119,7 +121,6 @@ iframe {
   /* Add any additional styles you need */
 }
 
-
 .disabled {
   opacity: 0.6;
   pointer-events: none;
@@ -162,11 +163,11 @@ iframe {
   overflow-y: auto; /* Vertical scroll only when needed */
 }
 
- /* CALENDAR */
- .icon-large {
+/* CALENDAR */
+.icon-large {
   font-size: 16px; /* Example size, adjust as needed */
 }
- .rbc-calendar {
+.rbc-calendar {
   font-family: sans-serif;
   font-size: 18px;
 }
@@ -179,13 +180,12 @@ iframe {
   margin: 0 10px; /* Adding margin for spacing */
   border-radius: 4px; /* Optional: rounding the corners for a softer look */
   background-color: #ecf0f1; /* Light background color to make it stand out */
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Optional: adding a subtle shadow for depth */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adding a subtle shadow for depth */
   display: inline-block; /* To apply padding and background color correctly */
-   /* Adding glow to the text */
+  /* Adding glow to the text */
   /* text-shadow: 0 0 2px rgba(252, 252, 252, 0.8); Adjust color and glow size as needed */
 }
 
-
 .mobile-calendar .rbc-btn-group button {
   padding: 4px 6px; /* Smaller buttons */
   font-size: 16px; /* Smaller button text */
@@ -232,8 +232,7 @@ iframe {
   cursor: pointer;
   transition: all 0.3s;
 } */
-.rbc-calendar .rbc-month-view .rbc-event 
-{
+.rbc-calendar .rbc-month-view .rbc-event {
   padding: 2;
   margin: 2;
   background-color: transparent;
@@ -246,14 +245,10 @@ iframe {
   /* min-height:150px !important; * /
 } */
 
-
-
 .react-responsive-carousel .control-arrow {
-  width: 25%; 
+  width: 25%;
 }
 
-
-
 /* Custom CSS for responsive table */
 @media (max-width: 768px) {
   /* Hide table headers on small screens */
@@ -291,4 +286,3 @@ iframe {
   align-items: center;
   justify-content: center; /* Optional: center buttons in the group */
 }
-