From 9e56fad34204c33f6d0c241175ab94a0d980d2b3 Mon Sep 17 00:00:00 2001
From: Alexander Whitestone
 <8633216+AlexanderWhitestone@users.noreply.github.com>
Date: Wed, 11 Mar 2026 13:08:19 -0400
Subject: [PATCH] Fix iPhone responsiveness: layout stacking and Memory Browser
 styling (#171)

- Fix critical mobile layout bug: override flex-wrap: nowrap on .mc-content > .row
  at 768px breakpoint so Bootstrap columns stack vertically on iPhone instead of
  being crammed side-by-side (causing content bleed/cutoff)
- Add complete Memory Browser CSS: stats grid, search form, results, facts list
  with proper mobile breakpoints (2-col stats, stacked search form, touch-friendly
  fact buttons)
- Move Grok button and fact list inline styles to CSS classes per project convention
- Add shared .mc-btn, .mc-btn-primary, .mc-btn-small, .page-title, .mc-text-secondary
  classes used across templates

https://claude.ai/code/session_01VRjXp6wxBrgawsKB92LEaT

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/dashboard/templates/memory.html           |  10 +-
 .../templates/partials/agent_panel_chat.html  |   4 +-
 static/css/mission-control.css                | 282 ++++++++++++++++++
 static/style.css                              |   3 +-
 4 files changed, 290 insertions(+), 9 deletions(-)

diff --git a/src/dashboard/templates/memory.html b/src/dashboard/templates/memory.html
index 9a221fc3..1c2822aa 100644
--- a/src/dashboard/templates/memory.html
+++ b/src/dashboard/templates/memory.html
@@ -105,12 +105,12 @@
     
     <div class="mc-facts-list">
       {% if facts %}
-      <ul class="mc-fact-list" style="list-style: none; padding: 0;">
+      <ul class="mc-fact-list">
         {% for fact in facts %}
-        <li class="memory-fact" id="fact-{{ fact.id }}" style="display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.08);">
-          <span class="fact-content" style="flex:1;">{{ fact.content }}</span>
-          <button class="mc-btn mc-btn-small" onclick="editFact('{{ fact.id }}', this)" style="font-size:0.7rem; padding:2px 8px;">EDIT</button>
-          <button class="mc-btn mc-btn-small" onclick="deleteFact('{{ fact.id }}')" style="font-size:0.7rem; padding:2px 8px; color:#ef4444;">DEL</button>
+        <li class="memory-fact" id="fact-{{ fact.id }}">
+          <span class="fact-content">{{ fact.content }}</span>
+          <button class="mc-btn mc-btn-small" onclick="editFact('{{ fact.id }}', this)">EDIT</button>
+          <button class="mc-btn mc-btn-small fact-btn-del" onclick="deleteFact('{{ fact.id }}')">DEL</button>
         </li>
         {% endfor %}
       </ul>
diff --git a/src/dashboard/templates/partials/agent_panel_chat.html b/src/dashboard/templates/partials/agent_panel_chat.html
index a89703b1..821e64a7 100644
--- a/src/dashboard/templates/partials/agent_panel_chat.html
+++ b/src/dashboard/templates/partials/agent_panel_chat.html
@@ -56,9 +56,7 @@
           <span id="send-indicator" class="htmx-indicator">&#x25FC;</span>
         </button>
         <button type="button"
-                class="btn"
-                style="background: #1a1a2e; color: #00ff88; border: 1px solid #00ff88;
-                       font-size: 0.7rem; white-space: nowrap; padding: 4px 10px;"
+                class="btn mc-btn-grok"
                 onclick="askGrok()"
                 title="Send directly to Grok (xAI)">
           GROK
diff --git a/static/css/mission-control.css b/static/css/mission-control.css
index 4ef7d8ed..854544dc 100644
--- a/static/css/mission-control.css
+++ b/static/css/mission-control.css
@@ -2156,3 +2156,285 @@
   color: var(--text-dim);
   letter-spacing: 0.08em;
 }
+
+
+/* ── Agent chat: Grok button ────────────────────────────── */
+.mc-btn-grok {
+  background: var(--bg-card);
+  color: var(--green);
+  border: 1px solid var(--green);
+  font-size: 0.7rem;
+  font-family: var(--font);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s, box-shadow 0.15s;
+  touch-action: manipulation;
+}
+.mc-btn-grok:hover {
+  background: rgba(0, 232, 122, 0.12);
+  box-shadow: 0 0 10px rgba(0, 232, 122, 0.25);
+}
+
+
+/* ── Shared page-level elements ─────────────────────────── */
+.page-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 0 0 4px;
+}
+.mc-text-secondary {
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+/* ── Shared buttons ─────────────────────────────────────── */
+.mc-btn {
+  font-family: var(--font);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  padding: 6px 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  touch-action: manipulation;
+}
+.mc-btn:hover {
+  border-color: var(--purple);
+  color: var(--text-bright);
+}
+.mc-btn-primary {
+  background: var(--border-glow);
+  border-color: var(--border-glow);
+  color: var(--text-bright);
+}
+.mc-btn-primary:hover {
+  background: var(--purple);
+  border-color: var(--purple);
+}
+.mc-btn-small {
+  font-size: 0.65rem;
+  padding: 3px 10px;
+  min-height: 28px;
+}
+
+
+/* ── Memory Browser ─────────────────────────────────────── */
+.mc-stats-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 10px;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.mc-stat-card {
+  text-align: center;
+  padding: 10px 6px;
+  background: rgba(24, 10, 45, 0.6);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+.mc-stat-value {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-bright);
+  line-height: 1.2;
+}
+.mc-stat-label {
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+
+.mc-search-section {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.mc-search-form {
+  display: flex;
+  gap: 8px;
+}
+.mc-search-input {
+  flex: 1;
+  background: rgba(8, 4, 18, 0.75);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-bright);
+  font-family: var(--font);
+  font-size: 13px;
+  padding: 10px 12px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  min-height: 44px;
+}
+.mc-search-input:focus {
+  outline: none;
+  border-color: var(--border-glow);
+  box-shadow: 0 0 0 1px var(--border-glow), 0 0 10px rgba(124, 58, 237, 0.25);
+}
+.mc-search-input::placeholder {
+  color: var(--text-dim);
+}
+.mc-search-info {
+  font-size: 0.8rem;
+  color: var(--text-dim);
+  margin: 8px 0 0;
+}
+
+.mc-results-section {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+}
+.mc-results-section h3 {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0 0 12px;
+}
+.memory-entry {
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: rgba(24, 10, 45, 0.5);
+  margin-bottom: 10px;
+}
+.memory-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+.memory-source {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-bright);
+  letter-spacing: 0.06em;
+}
+.mc-badge {
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 2px 8px;
+  border-radius: 2px;
+  background: rgba(168, 85, 247, 0.2);
+  color: var(--purple);
+}
+.memory-score {
+  font-size: 0.7rem;
+  color: var(--green);
+  margin-left: auto;
+}
+.memory-content {
+  font-size: 0.85rem;
+  color: var(--text);
+  line-height: 1.6;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.memory-meta {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+}
+.mc-empty-state {
+  text-align: center;
+  padding: 24px 16px;
+  color: var(--text-dim);
+}
+.mc-empty-state p:first-child {
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.mc-facts-section {
+  padding: 16px;
+}
+.mc-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.mc-section-header h3 {
+  font-size: 0.85rem;
+  color: var(--text-dim);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  margin: 0;
+}
+.mc-inline-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.mc-inline-form .mc-input {
+  flex: 1;
+  min-width: 0;
+}
+.mc-fact-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.memory-fact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(59, 26, 92, 0.3);
+}
+.memory-fact:last-child {
+  border-bottom: none;
+}
+.fact-content {
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+.fact-btn-del {
+  color: var(--red) !important;
+}
+
+@media (max-width: 768px) {
+  .page-title { font-size: 1.1rem; }
+  .mc-stats-row {
+    grid-template-columns: repeat(2, 1fr);
+    padding: 12px;
+    gap: 8px;
+  }
+  .mc-stat-card { padding: 8px 4px; }
+  .mc-stat-value { font-size: 1.1rem; }
+  .mc-search-section { padding: 12px; }
+  .mc-search-form { flex-direction: column; }
+  .mc-search-input { font-size: 16px; }
+  .mc-results-section { padding: 12px; }
+  .mc-facts-section { padding: 12px; }
+  .mc-section-header { flex-wrap: wrap; }
+  .mc-inline-form { flex-direction: column; }
+  .memory-fact { gap: 6px; }
+  .mc-btn-small {
+    min-height: 36px;
+    padding: 4px 12px;
+    font-size: 0.7rem;
+  }
+}
diff --git a/static/style.css b/static/style.css
index 06adec47..91d9a3a2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -826,7 +826,8 @@ a:hover { color: var(--orange); }
     padding: 10px;
     padding-bottom: max(10px, env(safe-area-inset-bottom));
   }
-  .mc-content, .mc-content > .row { height: auto; }
+  .mc-content { height: auto; }
+  .mc-content > .row { height: auto; flex-wrap: wrap !important; }
 
   /* ── Sidebar becomes a horizontal scroll strip ── */
   .mc-sidebar {