Rockachopa/Timmy-time-dashboard
1
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix iPhone responsiveness: layout stacking and Memory Browser styling (#171)

Browse Source 
- 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>
This commit is contained in:
Alexander Whitestone
2026-03-11 13:08:19 -04:00
committed by GitHub
parent 68115fe477
commit 9e56fad342
4 changed files with 290 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/dashboard/templates/memory.html
View File

@@ -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>

4
src/dashboard/templates/partials/agent_panel_chat.html
View File

@@ -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

282
static/css/mission-control.css
View File

@@ -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;
}
}

3
static/style.css
View File

@@ -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 {