Mobile friendly.

templates/dashboard_base.html

@@ -346,6 +346,70 @@
         footer a:hover {
             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 */
+                padding: 1rem;
+            }
+            .view-switcher {
+                margin-left: 0;
+                justify-content: center; /* Center the Daily/Weekly toggle */
+            }
+            .dropdown-menu {
+                width: 100%; /* Make dropdown menu full width */
+            }
+            .image-container {
+                width: 95%; /* Make content card fluid */
+                padding: 1.5rem;
+            }
+            header {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+            .header-action {
+                width: 100%;
+                justify-content: space-between;
+            }
+
+            /* --- The "Stacking Table" Magic --- */
+            table, thead, tbody, th, td, tr {
+                display: block; /* Make table elements behave like divs */
+            }
+            thead {
+                display: none; /* Hide the original table headers */
+            }
+            tr {
+                border: 1px solid rgba(255, 255, 255, 0.1);
+                border-radius: 8px;
+                margin-bottom: 1rem;
+            }
+            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 */
+            }
+            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 */
+                position: absolute;
+                left: 1rem;
+                width: 45%;
+                padding-right: 1rem;
+                font-weight: 700;
+                text-align: left;
+                color: #718096;
+            }
+            td.ticker, td.rank { text-align: right; } /* Override default text-align for these */
+        }
     </style>
 </head>