Update public/styles.css

public/styles.css

@@ -294,38 +294,69 @@ legend {
 .sortable.asc::after { content: '▲'; }
 .sortable.desc::after { content: '▼'; }
 
-/* ─── Trends Chart & Table ─────────────────────────────────────────────────── */
+/* ─── TRENDS PAGE STYLES ──────────────────────────────────────────────────── */
-/* Spreadsheet-style Trends table */
+.page-container.trends {
-#trends-table-container {
+  display: flex;
-  max-height: 50vh;       /* adjust as needed */
+  flex-direction: column;
-  overflow: auto;
+  position: absolute;
-  border: 1px solid #ddd;
+  top: 70px; left: 0; right: 0; bottom: 0;
+  overflow: hidden;
+}
+.page-container.trends h1 {
+  margin: 1rem;
+}
+.trends-controls {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+#timeframe-slider {
+  flex: 1;
+}
+#timeframe-label {
+  margin-left: 1rem;
+  white-space: nowrap;
+}
+.trends-metrics {
+  padding: 0 1rem;
   margin-bottom: 1rem;
 }
-#trends-table {
+.chart-container {
+  flex: 2;
+  margin: 0 1rem 1rem;
+  position: relative;
+}
+.chart-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+.table-wrapper {
+  flex: 1;
+  margin: 0 1rem;
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+.table-wrapper table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }
-#trends-table th,
+.table-wrapper th,
-#trends-table td {
+.table-wrapper td {
   padding: 8px;
   text-align: center;
-  border-bottom: 1px solid #ddd;
+  border: 1px solid #ccc;
 }
-#trends-table thead th {
+.table-wrapper thead th {
+  background: #f2f2f2;
   position: sticky;
   top: 0;
-  background: #f2f2f2;
+  z-index: 2;
-  border-bottom: 2px solid #ccc;
   cursor: pointer;
-  user-select: none;
 }
-/* zebra striping */
+.table-wrapper tbody tr:nth-child(even) {
-#trends-table tbody tr:nth-child(even) {
   background: #fafafa;
 }
-/* sort arrow indicators */
 .sortable::after {
   content: '▲▼';
   font-size: 0.6em;