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; } }