feat(maps): the phone trip map keeps its credit in the bottom right corner

The credit button sat in the middle of the round controls band, beside the
locate button. On the trip map it now has the bottom right corner to
itself, a gap above the dock (or above the stage bar on the road trip
tab), and the band floats one credit row higher, so the switcher, the
compass and the locate button stay on one line.

MMapArea marks its layer as a credit corner and defines the floor the map
ends at; mobile.css places both GL engines' compact control there, keeps
an opened GL credit's button in the corner, moves the Mapbox wordmark into
the same row instead of under the compass, and unfolds the Leaflet credit
to the left of its button. MapAttributionToggle reads the same two
variables with today's values as the fallback, so the other phone maps and
the desktop keep their placement.

client/src/components/Map/MapView.test.tsx

@@ -988,6 +988,32 @@ describe('MapView live location', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Follow my location' }))
     expect(geoMock.cycleMode).toHaveBeenCalled()
   })
+
+  it('FE-COMP-MAPVIEW-077: the credit (i) is a phone control, and it opens the credit through a class on the wrapper', () => {
+    const desktop = render(<MapView />)
+    expect(screen.queryByRole('button', { name: 'Map credits' })).toBeNull()
+    desktop.unmount()
+
+    Object.defineProperty(window, 'innerWidth', { configurable: true, writable: true, value: 420 })
+    const { container } = render(<MapView />)
+    const toggle = screen.getByRole('button', { name: 'Map credits' })
+    const wrapper = container.querySelector('div.w-full.h-full.relative') as HTMLElement
+    // Starts closed: on a phone the map is the screen, and the credit is one tap away.
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(wrapper.classList.contains('m-attrib-open')).toBe(false)
+    // The locate button's band is only the fallback; a credit corner around the map wins.
+    expect(toggle.style.bottom).toBe('var(--m-credit-bottom, calc(var(--bottom-nav-h, 84px) + 12px))')
+
+    // A class on the wrapper rather than markup in Leaflet's own container, which Leaflet
+    // rewrites whenever a layer with an attribution comes or goes.
+    fireEvent.click(toggle)
+    expect(toggle.getAttribute('aria-expanded')).toBe('true')
+    expect(wrapper.classList.contains('m-attrib-open')).toBe(true)
+
+    fireEvent.click(toggle)
+    expect(toggle.getAttribute('aria-expanded')).toBe('false')
+    expect(wrapper.classList.contains('m-attrib-open')).toBe(false)
+  })
 })
 
 describe('MapView bounds fitting', () => {