Fix map view layout and z-index issues
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 57s

- Move location-info banner above map view as full-width bar
- Set fixed height for map view container with equal map/list heights
- Add z-index to map to prevent overlap with sticky header
- Update mobile responsive styles for consistent heights

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-01-15 11:36:08 +00:00
parent fb30f43ef7
commit 1913af4e7f
2 changed files with 13 additions and 10 deletions

View File

@@ -601,8 +601,8 @@ function updateLocationInfoBanner(searchLocation) {
<span>Showing schools within ${searchLocation.radius} miles of <strong>${searchLocation.postcode.toUpperCase()}</strong></span>
`;
// Insert banner before the schools grid
elements.schoolsGrid.parentNode.insertBefore(banner, elements.schoolsGrid);
// Insert banner before the results container (above map view)
elements.resultsContainer.parentNode.insertBefore(banner, elements.resultsContainer);
}
async function searchByLocation() {

View File

@@ -453,7 +453,7 @@ body {
display: grid;
grid-template-columns: 1fr 400px;
gap: 1.5rem;
min-height: 600px;
height: 600px;
}
.results-container.map-view .results-map {
@@ -461,15 +461,17 @@ body {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-color);
min-height: 600px;
height: 100%;
position: relative;
z-index: 1;
}
.results-container.map-view .schools-grid {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.75rem;
overflow-y: auto;
max-height: 600px;
height: 100%;
padding-right: 0.5rem;
}
@@ -852,16 +854,17 @@ body {
.results-container.map-view {
grid-template-columns: 1fr;
grid-template-rows: 350px auto;
min-height: auto;
height: auto;
}
.results-container.map-view .results-map {
min-height: 350px;
height: 350px;
}
.results-container.map-view .schools-grid {
max-height: none;
overflow-y: visible;
height: auto;
max-height: 400px;
overflow-y: auto;
}
}