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/shared/DetailShell.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { X } from 'lucide-react'
 import { NEUTRAL_TINT } from './DialogShell'
 import { Tooltip } from './Tooltip'
+import { centredMapCardBox } from '../Map/centredMapCard'
 
 interface DetailShellProps {
   header: ReactNode
@@ -11,6 +12,8 @@ interface DetailShellProps {
   closeLabel: string
   leftWidth?: number
   rightWidth?: number
+  /** Over the desktop map: keep clear of the base-layer pill in its bottom-left corner. */
+  clearMapPill?: boolean
   /** The head band's background; the neutral accent wash when left out. */
   tint?: string
   closeButtonClassName?: string
@@ -30,6 +33,7 @@ export default function DetailShell({
   closeLabel,
   leftWidth = 0,
   rightWidth = 0,
+  clearMapPill = false,
   tint = NEUTRAL_TINT,
   closeButtonClassName = '',
   testId,
@@ -39,9 +43,8 @@ export default function DetailShell({
       style={{
         position: 'absolute',
         bottom: 20,
-        left: `calc(${leftWidth}px + (100% - ${leftWidth}px - ${rightWidth}px) / 2)`,
+        ...centredMapCardBox(leftWidth, rightWidth, { clearPill: clearMapPill }),
         transform: 'translateX(-50%)',
-        width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
         zIndex: 50,
         fontFamily: 'var(--font-system)',
       }}