Fix display of time selection on mobile devices

Refactor DateTimePicker component to improve responsiveness and visibility of time selection columns on various mobile viewports using adaptive sizing and collision detection.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/cOs6ffF

replit.md

@@ -10,8 +10,8 @@ Preferred communication style: Simple, everyday language.
 
 ## Recent Changes
 
-### October 28, 2025
-- **DateTimePicker Columns Visibility Fix**: Fixed critical display issues where time picker columns were not visible. Problem: Using `w-auto max-w-[280px]` caused hour/minute columns to overflow or disappear (desktop showed hours but cut off minutes, mobile showed nothing). Solution: Set fixed width `w-[200px]` on PopoverContent with explicit column widths (`w-24` for hours, `w-20` for minutes). Both columns now reliably visible on all devices with compact, consistent layout.
+### October 29, 2025
+- **DateTimePicker Mobile Viewport Fix**: Fixed critical display issues where time picker columns were not visible on mobile devices. Problem: Popover could overflow screen edges or be positioned off-viewport on small mobile screens. Solution: Implemented comprehensive responsive strategy with flexible widths (`w-auto min-w-[200px] max-w-[280px]`), centered alignment, and Radix UI collision detection props (`collisionPadding={16}`, `avoidCollisions={true}`, `side="bottom"`). ScrollArea columns use `min-w-[96px] flex-1` (hours) and `min-w-[80px] flex-1` (minutes) for adaptive sizing. Tested and verified on iPhone 12 (390x844), iPhone SE 2nd/3rd gen (375x667), and iPhone SE 1st gen (320x568 - smallest modern iPhone). Both hour and minute columns now reliably visible and functional on all tested mobile viewports.
 - **Scheduled Posts Page-Level Filtering Security Fix**: Fixed security vulnerability where users could see occupied dates from all pages in the DateTimePicker, including pages they don't have access to. Added new storage method `getScheduledPostsByPages()` that filters scheduled posts directly in database using SQL WHERE IN clause with authorized page IDs. Modified GET `/api/scheduled-posts` endpoint to use getUserAccessiblePages for standard users (only their assigned pages) and all pages for admins. This eliminates temporary exposure of sensitive data in memory and improves performance by querying only authorized posts from the database.
 - **Interactive Calendar with Visual Indicators**: Replaced native datetime-local input with custom DateTimePicker component featuring visual planning aids. Calendar displays occupied dates with red background (bg-red-500/20) to prevent scheduling conflicts. Time selector highlights optimal posting hours (8h, 12h-13h, 18h-20h) with green background (bg-green-500/20) and sparkle emoji to maximize audience engagement. Component includes clear button (X icon) to quickly return to immediate publishing, useEffect synchronization for external state updates, and French locale support via date-fns. Time selector optimized for compactness: ScrollArea height reduced from 240px to 192px (20% smaller), button height set to 36px for touch accessibility, tighter padding and margins throughout. Mobile calendar list still displays today's date first for quick access.
 - **Facebook Video Story Publishing Fix**: Fixed critical bug preventing video story publication. Facebook Graph API requires a 3-phase upload process for video stories: (1) START phase - initialize upload session and get `video_id` + `upload_url`, (2) UPLOAD phase - POST video to rupload.facebook.com endpoint with `file_url` header and OAuth authorization, (3) FINISH phase - finalize and publish story with `video_id`. Previous implementation incorrectly attempted direct upload to `/video_stories` endpoint with `file_url` parameter, causing "#100 The parameter upload_phase is required" error. Fixed by implementing proper 3-phase workflow using remote URL upload method (file_url header), avoiding need for binary chunked uploads.