1
0

polish: streamline nav, extract inline styles, improve tablet UX (#168)

This commit is contained in:
Alexander Whitestone
2026-03-11 11:32:56 -04:00
committed by GitHub
parent b028b768c9
commit 708c8a2477
5 changed files with 484 additions and 182 deletions

View File

@@ -187,6 +187,11 @@ a:hover { color: var(--orange); }
.mc-dropdown-menu .mc-test-link:hover {
background: rgba(124, 58, 237, 0.12);
}
.mc-dropdown-menu .mc-test-link.active {
color: var(--orange);
border-left: 3px solid var(--orange);
background: rgba(124, 58, 237, 0.08);
}
/* ── Mobile section labels ───────────────────────── */
.mc-mobile-section-label {
@@ -767,6 +772,34 @@ a:hover { color: var(--orange); }
}
/* ════════════════════════════════════════════════════
TABLET (max-width: 1024px) — iPad / Apple Pencil
════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* Larger touch targets for nav dropdown toggles */
.mc-test-link {
font-size: 10px;
padding: 6px 12px;
min-height: 36px;
display: inline-flex;
align-items: center;
}
.mc-dropdown-menu .mc-test-link {
padding: 10px 16px;
min-height: 40px;
}
/* Prevent iPad floating toolbar from obscuring chat input */
.mc-chat-footer {
padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
}
/* Ensure chat input is above iPad keyboard toolbar */
.mc-main {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
}
/* ════════════════════════════════════════════════════
MOBILE (max-width: 768px) — iPhone optimized
════════════════════════════════════════════════════ */