fix: show map poi search controls on mobile (#1555)

client/src/pages/TripPlannerPage.test.tsx

@@ -7,6 +7,7 @@ import { buildUser, buildTrip, buildDay, buildPlace, buildAssignment } from '../
 import { useAuthStore } from '../store/authStore';
 import { useTripStore } from '../store/tripStore';
 import { usePluginStore } from '../store/pluginStore';
+import { useSettingsStore } from '../store/settingsStore';
 import TripPlannerPage from './TripPlannerPage';
 import { server } from '../../tests/helpers/msw/server';
 import { http, HttpResponse } from 'msw';
@@ -1516,6 +1517,31 @@ describe('TripPlannerPage', () => {
   });
 
   describe('FE-PAGE-PLANNER-049: Mobile sidebar left panel opens via Plan button', () => {
+    it('renders the POI category pill in the mobile map controls', async () => {
+      vi.useFakeTimers();
+
+      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 375 });
+      seedStore(useSettingsStore, {
+        settings: {
+          ...useSettingsStore.getState().settings,
+          map_poi_pill_enabled: true,
+        },
+      } as any);
+      seedTripStore({ id: 42 });
+
+      renderPlannerPage(42);
+      act(() => { vi.runAllTimers(); });
+      vi.useRealTimers();
+
+      await waitFor(() => {
+        const pill = screen.getByTestId('mobile-poi-category-pill');
+        expect(pill).toBeInTheDocument();
+        expect(pill.querySelectorAll('button').length).toBeGreaterThan(0);
+      });
+
+      Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1024 });
+    });
+
     it('clicking the mobile Plan button opens the left sidebar portal (lines 882-893)', async () => {
       vi.useFakeTimers();
 

client/src/pages/TripPlannerPage.tsx

@@ -359,6 +359,15 @@ export default function TripPlannerPage(): React.ReactElement | null {
               </div>
             )}
 
+            {/* Mobile POI search controls live in a portal like the Plan/Places
+                buttons so map touch handlers cannot swallow the tap targets. */}
+            {poiPillEnabled && !mobileSidebarOpen && !showPlaceForm && !showMembersModal && !showReservationModal && ReactDOM.createPortal(
+              <div data-testid="mobile-poi-category-pill" className="flex md:hidden" style={{ position: 'fixed', left: 12, right: 12, bottom: 'calc(var(--bottom-nav-h, 0px) + 12px)', justifyContent: 'center', zIndex: 100, pointerEvents: 'none' }}>
+                <PoiCategoryPill active={poi.active} onToggle={poi.toggle} loadingKeys={poi.loadingKeys} errorKeys={poi.errorKeys} moved={poi.moved} onSearchArea={poi.searchArea} />
+              </div>,
+              document.body
+            )}
+
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <button onClick={() => setLeftCollapsed(c => !c)}
                 style={{