feat(mobile): collapse rail by default; tighten project page header layout

Editor:
- Auto-collapse the file-tree rail on mobile so the editor+PDF panels
  occupy the full screen width instead of sharing it with a 15% sidebar.
  The user can still open the rail from the toolbar; the collapse only
  fires on first load or when switching to a mobile viewport.

Project page (Lumiere):
- Move the XS/M/L zoom buttons from the mobile filter-pill toolbar into
  a row with the New Project button, so neither is stranded alone.
- The search bar gets its own full-width row above the actions row.
- Desktop layout is unchanged (search + new-project stay side-by-side;
  zoom stays in the title row). `display:contents` makes the wrapper
  div transparent to the desktop flex container.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -41,7 +41,11 @@ function detectMobile() {
 
 export default function MainLayout() {
   const [resizing, setResizing] = useState(false)
-  const { resizing: railResizing } = useRailContext()
+  const {
+    resizing: railResizing,
+    handlePaneCollapse: collapseRail,
+    isOpen: railIsOpen,
+  } = useRailContext()
   const {
     togglePdfPane,
     handlePdfPaneExpand,
@@ -65,6 +69,16 @@ export default function MainLayout() {
     }
   }, [])
 
+  // On mobile, collapse the file-tree rail so editor+PDF panels get full width.
+  useEffect(() => {
+    if (isMobile && railIsOpen) {
+      collapseRail()
+    }
+    // Only run on mount and when isMobile changes — don't re-collapse if the
+    // user manually re-opens the rail during the session.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMobile])
+
   // verticalSplit is always vertical; sideBySide becomes vertical on mobile
   const isVertical =
     pdfLayout === 'verticalSplit' ||