fix(find-training): Fix mobile scrolling on Find Training page

On mobile, the page used overflow:hidden + height:100vh with nested
scrolling in a 158px sidebar area, making it impossible to scroll
through trainer/venue/event cards. Switched mobile layout to natural
page scrolling with sticky filter bar. Desktop layout unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ben 2026-02-09 18:01:03 -04:00
parent f123c7a513
commit 4104c80669
3 changed files with 76 additions and 18 deletions

View file

@ -1,8 +1,8 @@
# HVAC Community Events - Project Status
**Last Updated:** February 9, 2026
**Current Session:** Map Tile Drift Fix & Event Cost Display
**Version:** 2.2.13 (Deployed to Production)
**Current Session:** Mobile Find Training Scroll Fix
**Version:** 2.2.14 (Deployed to Production)
---
@ -20,7 +20,44 @@
---
## 🎯 CURRENT SESSION - MAP TILE DRIFT FIX & EVENT COST DISPLAY (Feb 9, 2026)
## 🎯 CURRENT SESSION - MOBILE FIND TRAINING SCROLL FIX (Feb 9, 2026)
### Status: ✅ **COMPLETE - Deployed to Production (v2.2.14)**
**Objective:** Fix mobile scrolling on the Find Training page — users could not scroll down to see the trainer, venue, and event lists.
### Issue Found & Fixed
1. **Mobile Page Not Scrollable** (`assets/css/find-training-map.css`)
- **Symptom:** On mobile, the Find Training page rendered correctly but users could not scroll down past the map to browse trainer/venue/event cards
- **Root Cause:** The page used a fixed-viewport layout (`height: 100vh; overflow: hidden`) with nested scrolling. On mobile, the sidebar content area was only 158px tall (out of 940px of content) — touch scrolling in such a tiny nested region was unreliable/impossible on real phones
- **Fix:** On screens ≤991px, switched from fixed-viewport to natural page scrolling:
- Page container: `height: auto; overflow: visible` (was `100vh; hidden`)
- Map layout grid: `overflow: visible`, sidebar row `auto` (was `1fr`)
- Sidebar: `overflow: visible; max-height: none` (was `hidden; 50vh`)
- Filter bar: `position: sticky` so it stays visible while scrolling
- Desktop layout (>991px) unchanged
2. **Version Bump for Cache Busting** (`includes/class-hvac-plugin.php`)
- Bumped `HVAC_VERSION` and `HVAC_PLUGIN_VERSION` from `2.2.13` to `2.2.14`
### Files Modified
| File | Change |
|------|--------|
| `assets/css/find-training-map.css` | Mobile layout: natural page scrolling, sticky filter bar, removed overflow constraints |
| `includes/class-hvac-plugin.php` | Version bump `2.2.13``2.2.14` |
### Verification
- ✅ Production mobile (375x812): page scrollable, all 42 trainer cards accessible
- ✅ Production mobile: filter bar stays sticky at top while scrolling
- ✅ Production mobile: sidebar content 940px fully visible (was 158px)
- ✅ Production desktop (1400x900): side-by-side layout unchanged, no regression
---
## 📋 PREVIOUS SESSION - MAP TILE DRIFT FIX & EVENT COST DISPLAY (Feb 9, 2026)
### Status: ✅ **COMPLETE - Deployed to Production (v2.2.13)**

View file

@ -1229,19 +1229,48 @@ body .hvac-find-training-page {
--hvac-sidebar-width: 320px;
}
/* On mobile/tablet, allow natural page scrolling instead of fixed viewport */
.hvac-find-training-page {
height: auto !important;
overflow: visible !important;
}
/* Keep filter bar visible while scrolling */
.hvac-filter-bar {
position: sticky;
top: 0;
z-index: 100;
}
.admin-bar .hvac-filter-bar {
top: 46px;
}
/* Switch to stacked layout - map on top, sidebar below */
.hvac-map-layout {
grid-template-areas:
"map"
"sidebar" !important;
grid-template-columns: 1fr !important;
grid-template-rows: 55vh 1fr !important;
grid-template-rows: 55vh auto !important;
overflow: visible !important;
}
/* Map needs explicit height since page no longer constrains it */
.hvac-map-container {
min-height: 300px;
}
.hvac-sidebar {
border-right: none;
border-top: 1px solid var(--hvac-border);
max-height: 45vh;
overflow: visible !important;
max-height: none !important;
}
/* Sidebar content scrolls with page, not independently */
.hvac-sidebar-content {
overflow-y: visible !important;
}
/* Show sidebar toggle on tablet/mobile */
@ -1252,7 +1281,7 @@ body .hvac-find-training-page {
/* Collapsible sidebar */
.hvac-sidebar.collapsed {
max-height: 80px;
overflow: hidden;
overflow: hidden !important;
}
.hvac-sidebar.collapsed .hvac-sidebar-content {
@ -1318,11 +1347,7 @@ body .hvac-find-training-page {
@media (max-width: 767px) {
.hvac-map-layout {
grid-template-rows: 50vh 1fr;
}
.hvac-sidebar {
max-height: 50vh;
grid-template-rows: 50vh auto;
}
/* Filter bar adjustments */
@ -1452,11 +1477,7 @@ body .hvac-find-training-page {
@media (max-width: 480px) {
.hvac-map-layout {
grid-template-rows: 45vh 1fr;
}
.hvac-sidebar {
max-height: 55vh;
grid-template-rows: 45vh auto;
}
.hvac-map-legend {

View file

@ -112,10 +112,10 @@ final class HVAC_Plugin {
*/
private function defineConstants(): void {
if (!defined('HVAC_PLUGIN_VERSION')) {
define('HVAC_PLUGIN_VERSION', '2.2.13');
define('HVAC_PLUGIN_VERSION', '2.2.14');
}
if (!defined('HVAC_VERSION')) {
define('HVAC_VERSION', '2.2.13');
define('HVAC_VERSION', '2.2.14');
}
if (!defined('HVAC_PLUGIN_FILE')) {
define('HVAC_PLUGIN_FILE', dirname(__DIR__) . '/hvac-community-events.php');