fix(client): clamp a flipped date picker to the viewport

Anchoring the flipped popup to the trigger's top edge dropped the old
vertical clamp: with a short viewport the popup's top edge left the screen
and the month header became unreachable. The popup now flips up only when
there is room above; otherwise it stays below and is clamped so its top
edge never leaves the viewport.

client/src/components/shared/CustomDateTimePicker.test.tsx

@@ -608,7 +608,7 @@ describe('CustomDatePicker branches', () => {
     }
   });
 
-  it('FE-W5DP-024: a flipped popup stays flush against its trigger instead of a fixed guessed offset (#2334)', () => {
+  it('FE-W5DP-024: a flipped popup stays flush against its trigger instead of a fixed guessed offset', () => {
     // A settle-up-style form: the trigger sits low enough that the popup can't
     // fit below it, but there is plenty of room above — a shorter gap than the
     // worst-case guess would previously leave the popup floating over unrelated
@@ -633,6 +633,29 @@ describe('CustomDatePicker branches', () => {
     }
   });
 
+  it('FE-W5DP-025: a popup with no room on either side keeps its top edge inside the viewport', () => {
+    // A phone in landscape: 375px tall with the trigger mid-screen. The 360px
+    // popup fits neither below nor above, and flipping regardless would put
+    // its top edge 200px off-screen with no way to scroll to the month header.
+    const originalRect = Element.prototype.getBoundingClientRect;
+    const originalHeight = window.innerHeight;
+    Element.prototype.getBoundingClientRect = function () {
+      return { left: 20, top: 150, right: 220, bottom: 190, width: 200, height: 40, x: 20, y: 150, toJSON: () => ({}) } as DOMRect;
+    };
+    Object.defineProperty(window, 'innerHeight', { value: 375, configurable: true });
+
+    try {
+      render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
+      openCalendar();
+      const dialog = screen.getByRole('dialog');
+      expect(dialog.style.bottom).toBe('');
+      expect(dialog.style.top).toBe('8px');
+    } finally {
+      Element.prototype.getBoundingClientRect = originalRect;
+      Object.defineProperty(window, 'innerHeight', { value: originalHeight, configurable: true });
+    }
+  });
+
   it('FE-W5DP-018: the header arrows and the label highlight on hover', () => {
     render(<CustomDatePicker value="2026-03-15" onChange={onChange} />);
     openCalendar();