fix(planner): cards over the map stay clear of the layer pill, and a wide tab bar shows full tab names

The base-layer pill sits in the map's bottom-left corner on purpose. The
place inspector, a tour's detail and the day panel are centred between the
sidebars and were assumed never to reach that corner, but with both
sidebars open in a 1280 window they do, and the pill covered "Remove from
Day" and Edit. These cards now keep their left edge clear of the pill: a
narrow map moves the card right of it, a wide map keeps it centred as
before. The pill itself does not move, and the phone sheets are unchanged.

The Bookings tab showed "Book" at every width, which read as cut off. The
short form now only shows where the bar is tight; from xl up the tab shows
its full name.

Refs #2604

client/src/components/Map/centredMapCard.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { centredMapCardBox } from './centredMapCard';
+
+// Resolves the CSS the helper returns for a given container width, so the
+// geometry is checked in pixels rather than as strings.
+function resolve(css: string, extent: number): number {
+  const expr = css
+    .replace(/100%/g, `${extent}px`)
+    .replace(/px/g, '')
+    .replace(/calc/g, '')
+    .replace(/min\(/g, 'Math.min(')
+    .replace(/max\(/g, 'Math.max(');
+  return Function(`return (${expr})`)() as number;
+}
+
+describe('centredMapCardBox', () => {
+  it('keeps the old centred box when there is no pill to clear', () => {
+    const box = centredMapCardBox(320, 320);
+    expect(resolve(box.width, 1280)).toBe(608);
+    expect(resolve(box.left, 1280)).toBe(640);
+  });
+
+  it('a narrow desktop map moves the card off the base-layer pill (#2604)', () => {
+    const box = centredMapCardBox(350, 310, { clearPill: true });
+    const width = resolve(box.width, 1280);
+    const leftEdge = resolve(box.left, 1280) - width / 2;
+    // The pill spans 20 to 62 px right of the left panel.
+    expect(leftEdge).toBeGreaterThanOrEqual(350 + 62);
+    // And the card still stops 16 px short of the right panel.
+    expect(leftEdge + width).toBeLessThanOrEqual(1280 - 310 - 16);
+  });
+
+  it('a wide map keeps the card exactly centred and 800 wide', () => {
+    const box = centredMapCardBox(320, 320, { clearPill: true });
+    expect(resolve(box.width, 1920)).toBe(800);
+    expect(resolve(box.left, 1920)).toBe(960);
+  });
+});

client/src/components/Map/centredMapCard.ts

@@ -0,0 +1,34 @@
+import { MAP_LAYER_SWITCHER_INSET, MAP_ROUND_CONTROL_SIZE } from './MapLayerSwitcher';
+
+/** The card's gap to the side panels where nothing else sits at the map's edge. */
+const EDGE_GAP = 16;
+/** How far the card keeps from the left panel, so it ends short of the base-layer pill. */
+const PILL_CLEARANCE = MAP_LAYER_SWITCHER_INSET + MAP_ROUND_CONTROL_SIZE + 8;
+
+/**
+ * Where a card opened over the map sits (the place inspector, a tour's detail,
+ * the day panel): centred between the two side panels, at most 800 wide.
+ *
+ * On the desktop map the base-layer pill stays put in the bottom-left corner. On
+ * a map wide enough the centred card never reaches that corner, but on a narrower
+ * one (both sidebars open in a 1280 window) it ran under the pill, which then
+ * covered the first button of the card's footer (#2604). With `clearPill` the
+ * card's left edge never comes closer than the pill: a narrow card moves right of
+ * it and gives up the few pixels it needs, a wide map keeps it exactly centred.
+ * The phone shows these cards as sheets with no pill beside them, so it leaves
+ * `clearPill` off.
+ *
+ * `extent` is what the card is placed in: '100%' of the map, or '100vw' for the
+ * fixed day panel.
+ */
+export function centredMapCardBox(
+  leftWidth: number,
+  rightWidth: number,
+  { extent = '100%', clearPill = false }: { extent?: string; clearPill?: boolean } = {}
+): { left: string; width: string } {
+  const free = `(${extent} - ${leftWidth}px - ${rightWidth}px)`;
+  const centre = `calc(${leftWidth}px + ${free} / 2)`;
+  if (!clearPill) return { left: centre, width: `min(800px, calc(${free} - ${2 * EDGE_GAP}px))` };
+  const width = `min(800px, calc(${free} - ${PILL_CLEARANCE + EDGE_GAP}px))`;
+  return { width, left: `max(${centre}, calc(${leftWidth}px + ${PILL_CLEARANCE}px + ${width} / 2))` };
+}