Mobile improvement.

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 */
+                flex-direction: column;
-                align-items: stretch; /* Make items take full width */
+                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 */
+                width: 100%;
-                padding: 1.5rem;
+                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 */
+                padding-left: 50%;
-                text-align: right; /* Align values to the right */
+                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; }
         }
     </style>
 </head>