fix(school-detail): hide desktop nav controls on mobile (CSS order)
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 15s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 55s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

The mobile breakpoint's display:none for .sectionNavAll / .sectionNavCompare was
declared before their base display rules, so equal-specificity cascade let the
base win and "All ▾" showed on mobile alongside the section menu. Move the
breakpoint swap block after the base declarations so the hide rules win.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Lh7Js5xSetKNzLVr9ArXLF
This commit is contained in:
Tudor
2026-07-01 06:38:21 +01:00
co-authored by Claude Opus 4.8
parent 2fb7faf659
commit 51ba46c734
@@ -390,24 +390,6 @@
color: var(--accent-teal, #2d7d7d);
}
/* Swap which controls show at the mobile breakpoint. */
@media (max-width: 640px) {
.sectionNavLinks,
.sectionNavCompare,
.sectionNavAll,
.sectionNavBackLabel {
display: none;
}
.sectionNavMenu {
display: flex;
}
.sectionNavCompareIcon {
display: inline-flex;
}
}
/* Compare CTA carried into the bar once the hero's button scrolls away. */
.sectionNavCompare {
flex: none;
@@ -554,6 +536,25 @@
}
}
/* Swap which controls show at the mobile breakpoint. Declared last so these
display rules win over the base (equal-specificity) declarations above. */
@media (max-width: 640px) {
.sectionNavLinks,
.sectionNavCompare,
.sectionNavAll,
.sectionNavBackLabel {
display: none;
}
.sectionNavMenu {
display: flex;
}
.sectionNavCompareIcon {
display: inline-flex;
}
}
/* Unified card for all content sections */
.card {
background: var(--bg-card, white);