diff --git a/templates/dashboard_base.html b/templates/dashboard_base.html
index 8a8f162..bd8be31 100644
--- a/templates/dashboard_base.html
+++ b/templates/dashboard_base.html
@@ -347,24 +347,23 @@
color: #ffffff; /* Make it brighter on hover */
}
- /* This block only applies to screens 768px wide or smaller */
@media (max-width: 768px) {
body { padding: 0.5rem; }
.navbar {
- flex-direction: column; /* Stack navbar items vertically */
- align-items: stretch; /* Make items take full width */
+ flex-direction: column;
+ align-items: stretch;
padding: 1rem;
}
.view-switcher {
margin-left: 0;
- justify-content: center; /* Center the Daily/Weekly toggle */
+ justify-content: center;
}
.dropdown-menu {
- width: 100%; /* Make dropdown menu full width */
+ width: 100%;
}
.image-container {
- width: 95%; /* Make content card fluid */
- padding: 1.5rem;
+ width: 100%;
+ padding: 1.5rem 1rem;
}
header {
flex-direction: column;
@@ -374,32 +373,33 @@
width: 100%;
justify-content: space-between;
}
-
- /* --- The "Stacking Table" Magic --- */
table, thead, tbody, th, td, tr {
- display: block; /* Make table elements behave like divs */
+ display: block;
}
thead {
- display: none; /* Hide the original table headers */
+ display: none;
}
tr {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: 1rem;
+ padding: 0.5rem;
}
td {
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
- padding-left: 50%; /* Create space for the label */
- text-align: right; /* Align values to the right */
+ padding-left: 50%;
+ text-align: right;
+ display: flex; /* Use flex for better alignment */
+ align-items: center;
+ justify-content: flex-end;
}
td:last-child {
border-bottom: none;
}
- /* Add the label back in using a pseudo-element */
td::before {
- content: attr(data-label); /* Use the data-label attribute as content */
+ content: attr(data-label);
position: absolute;
left: 1rem;
width: 45%;
@@ -408,7 +408,7 @@
text-align: left;
color: #718096;
}
- td.ticker, td.rank { text-align: right; } /* Override default text-align for these */
+ td.ticker, td.rank { text-align: right; }
}