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>
 

templates/dashboard_view.html

@@ -39,8 +39,8 @@
         <tbody>
             {% for ticker in tickers %}
             <tr>
-                <td class="rank">{{ loop.index }}</td>
-                <td class="ticker">
+                <td data-label="Rank" class="rank">{{ loop.index }}</td>
+                <td data-label="Ticker" class="ticker">
                     <strong>
                         {% if is_image_mode %}
                             {{ ticker.symbol }}
@@ -49,21 +49,20 @@
                         {% endif %}
                     </strong>
                 </td>
-                <td class="mentions">{{ ticker.total_mentions }}</td>
-                <td class="sentiment">
+                <td data-label="Mentions" class="mentions">{{ ticker.total_mentions }}</td>
+                <td data-label="Sentiment" class="sentiment">
                     {% if ticker.bullish_mentions > ticker.bearish_mentions %}
                         <span class="sentiment-bullish">Bullish</span>
-                    {% elif ticker.bearish_mentions > ticker.bullish_mentions %}
+                    {% elif ticker.bearish_mentions > ticker.bearish_mentions %}
                         <span class="sentiment-bearish">Bearish</span>
                     {% else %}
                         <span class="sentiment-neutral">Neutral</span>
                     {% endif %}
                 </td>
-                <td class="financials">{{ ticker.market_cap | format_mc }}</td>
-                <td class="financials">
+                <td data-label="Mkt Cap" class="financials">{{ ticker.market_cap | format_mc }}</td>
+                <td data-label="Close Price" class="financials">
                     {% if ticker.closing_price %}
-                    <a href="https://finance.yahoo.com/quote/{{ ticker.symbol }}/" target="_blank"
-                        title="View on Yahoo Finance">
+                        <a href="https://finance.yahoo.com/quote/{{ ticker.symbol }}" target="_blank" title="View on Yahoo Finance">
                             ${{ "%.2f"|format(ticker.closing_price) }}
                         </a>
                     {% else %}