Companies' map: zoom and locate on the left, attribution in the bottom-right corner #907

New issue

Closed

opened 2026-10-13 07:43:46 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-13 07:43:46 +00:00

Owner

On the companies' map, the zoom and locate buttons move to the left, and the attribution (Leaflet · tile credit) sits in the bottom-right corner.

What exists today

Zoom and locate are both position: "bottomright" (static/js/app.js:7448-7454 for zoom, :7362 for Locate). The comment there says they are bottom right to stay clear of the heading over the top of the map (#849).
The attribution is Leaflet's default control, also bottom right (app.js:7461), so it shares the corner with the buttons.
.map-stage .leaflet-bottom (static/css/app.css:8522) lifts every bottom corner 6.5rem (3rem from sm) to clear the footer and the drawer. That means the attribution floats above the corner instead of sitting in it.
Overlays in templates/jobs/company_map.html: heading start-3 top-3, drawer end-3 top-3 from sm (inset-x-3 bottom-14 below that), status bottom centre, footer start-3 bottom-3.

What would change

Zoom and locate go to bottomleft, above the footer. The lift stays for that corner only (.leaflet-bottom.leaflet-left).
The attribution stays bottomright with no lift: it sits flush in the bottom-right corner of the map, bottom: 0; right: 0.
Update the #849 comment in app.js to say where the buttons are now and why.

To check

Below sm, the footer spans the full width at bottom-3 and the drawer is inset-x-3 bottom-14, so the attribution in the corner can collide with the footer. Either the footer leaves room at the end, or the attribution goes under it.
RTL: bottomleft/bottomright are physical, while the overlays use logical start/end. In RTL the buttons would land on the footer's side, so the positions should follow dir.
Browser tests that look for the controls by corner.

Checked against main at e1c6b4e9a.

On the companies' map, the zoom and locate buttons move to the left, and the attribution (Leaflet · tile credit) sits in the bottom-right corner. ## What exists today - Zoom and locate are both `position: "bottomright"` (`static/js/app.js:7448-7454` for zoom, `:7362` for `Locate`). The comment there says they are bottom right to stay clear of the heading over the top of the map (#849). - The attribution is Leaflet's default control, also bottom right (`app.js:7461`), so it shares the corner with the buttons. - `.map-stage .leaflet-bottom` (`static/css/app.css:8522`) lifts every bottom corner 6.5rem (3rem from `sm`) to clear the footer and the drawer. That means the attribution floats above the corner instead of sitting in it. - Overlays in `templates/jobs/company_map.html`: heading `start-3 top-3`, drawer `end-3 top-3` from `sm` (`inset-x-3 bottom-14` below that), status bottom centre, footer `start-3 bottom-3`. ## What would change - Zoom and locate go to `bottomleft`, above the footer. The lift stays for that corner only (`.leaflet-bottom.leaflet-left`). - The attribution stays `bottomright` with no lift: it sits flush in the bottom-right corner of the map, `bottom: 0; right: 0`. - Update the #849 comment in `app.js` to say where the buttons are now and why. ## To check - Below `sm`, the footer spans the full width at `bottom-3` and the drawer is `inset-x-3 bottom-14`, so the attribution in the corner can collide with the footer. Either the footer leaves room at the end, or the attribution goes under it. - RTL: `bottomleft`/`bottomright` are physical, while the overlays use logical `start`/`end`. In RTL the buttons would land on the footer's side, so the positions should follow `dir`. - Browser tests that look for the controls by corner. Checked against `main` at `e1c6b4e9a`.

tiagoagueda added the

enhancement

interface

labels

2026-10-13 07:43:51 +00:00

tiagoagueda referenced this issue from a commit

2026-10-13 12:35:06 +00:00

Put the map's zoom and Near me buttons at the bottom of the start side

tiagoagueda closed this issue

2026-10-13 12:35:06 +00:00

tiagoagueda commented

2026-10-13 12:35:06 +00:00