Fixed issue with header in Detailed Data

Author: ThatSINEWAVE

docs/index.html

@@ -179,30 +179,28 @@ <h2 class="text-lg font-semibold mb-4">URL Status Comparison</h2>
         <div class="bg-white p-4 rounded-lg shadow mb-6">
           <div class="flex justify-between items-center mb-4">
             <h2 class="text-lg font-semibold">Detailed Data</h2>
-            <button id="exportCSV" class="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded"> Export CSV </button>
+            <button id="exportCSV" class="bg-green-600 hover:bg-green-500 text-white px-3 py-1 rounded">Export CSV</button>
           </div>
           <div class="table-container">
             <table id="dataTable" class="min-w-full divide-y divide-gray-200">
-              <thead class="bg-gray-50 sticky top-0">
+              <thead>
                 <tr>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Case #</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Found On</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Attack Method</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Target</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                  <th>Case #</th>
+                  <th>Found On</th>
+                  <th>Username</th>
+                  <th>Attack Method</th>
+                  <th>Target</th>
+                  <th>Status</th>
+                  <th>Actions</th>
                 </tr>
               </thead>
-              <tbody id="tableBody" class="bg-white divide-y divide-gray-200">
+              <tbody id="tableBody">
                 <!-- Table rows will be inserted here -->
               </tbody>
             </table>
           </div>
           <div class="mt-4 flex justify-between items-center">
-            <div>
-              <span id="tableInfo" class="text-sm text-gray-600">Showing 0 of 0 entries</span>
-            </div>
+            <span id="tableInfo" class="text-sm text-gray-600">Showing 0 of 0 entries</span>
             <div class="pagination-controls">
               <button id="prevPage" class="prev-page">Previous</button>
               <button id="nextPage" class="next-page">Next</button>

docs/styles.css

@@ -188,28 +188,44 @@ body.bg-gray-900 #activeUrlsStatus:contains("Critical risk") {
 }
 
 /* Table styles */
+table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+/* Table rows */
+table tbody tr {
+	border-bottom: 1px solid #e5e7eb;
+}
+
 .table-container {
 	max-height: 400px;
 	overflow-y: auto;
+	position: relative;
 	border-radius: 0.375rem;
 	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+table thead {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	background-color: #f9fafb;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
 .table-container::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
+	width: 8px;
 }
 
 .table-container::-webkit-scrollbar-track {
 	background: #f3f4f6;
 	border-radius: 6px;
-	margin: 1px;
 }
 
 .table-container::-webkit-scrollbar-thumb {
 	background: #9ca3af;
 	border-radius: 6px;
-	border: 2px solid #f3f4f6;
 }
 
 .table-container::-webkit-scrollbar-thumb:hover {
@@ -240,10 +256,12 @@ table {
 }
 
 table th {
-	position: sticky;
-	top: 0;
-	z-index: 10;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+	padding: 12px;
+	text-align: left;
+	font-size: 12px;
+	font-weight: 600;
+	color: #4b5563;
+	background-color: #f3f4f6;
 }
 
 /* Fixed column widths */
@@ -416,42 +434,42 @@ select {
 }
 
 #detailModal table td {
-  word-break: break-word;
-  vertical-align: top;
+	word-break: break-word;
+	vertical-align: top;
 }
 
 #detailModal .url-cell {
-  max-width: 250px;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
+	max-width: 250px;
+	overflow-wrap: break-word;
+	word-wrap: break-word;
 }
 
 #detailModal .domain-cell {
-  max-width: 150px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+	max-width: 150px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 /* Ensure proper column width distribution */
 #detailModal table th:nth-child(1),
 #detailModal table td:nth-child(1) {
-  width: 100px;
+	width: 100px;
 }
 
 #detailModal table th:nth-child(2),
 #detailModal table td:nth-child(2) {
-  width: 250px;
+	width: 250px;
 }
 
 #detailModal table th:nth-child(3),
 #detailModal table td:nth-child(3) {
-  width: 150px;
+	width: 150px;
 }
 
 #detailModal table th:nth-child(4),
 #detailModal table td:nth-child(4) {
-  width: 100px;
+	width: 100px;
 }
 
 /* Button styles */