Update static/app.css

mobile responsiveness, n' such, too

static/app.css

@@ -905,3 +905,31 @@ a.footer-cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
 .tile-v { color: var(--violet); background: none;
   -webkit-background-clip: initial; background-clip: initial;
   -webkit-text-fill-color: currentColor; }
+
+/* ---- mobile responsiveness fixes (phone) ---- */
+
+/* Top nav: on a phone the brand wordmark + 5 links overflow a single row
+   (logo overlaps "Home", "Memory" clipped, "Feed" off-screen). Stack the brand
+   above a horizontally-scrollable link strip so nothing overlaps and every
+   page stays reachable. Reuses the classes from _nav_html(). */
+@media (max-width: 600px) {
+  #site-nav .nav-inner { flex-direction: column; align-items: stretch;
+    justify-content: flex-start; gap: 6px; padding: 8px 14px; }
+  .nav-brand { justify-content: flex-start; font-size: .98rem; }
+  .nav-links { width: 100%; gap: 16px; flex-wrap: nowrap; overflow-x: auto;
+    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
+  .nav-links::-webkit-scrollbar { display: none; }
+  .nav-solo { flex: 0 0 auto; white-space: nowrap; }
+}
+
+/* Activity "Activity by stage" chart shares a 2-col row with the timeline, so on
+   a phone it's stuck at half width and the x-axis stage labels collapse into
+   garbled overlapping text. Stack the row so the chart renders full-width. */
+@media (max-width: 760px) {
+  .act-chart-row { flex-direction: column !important; }
+  .act-chart-row > * { width: 100% !important; }
+}
+
+/* Footer: keep "on Hugging Face" (its own <a> in .footer-meta) on one line
+   instead of breaking as "on Hugging" / "Face". */
+.footer-meta a { white-space: nowrap; }