fix(files): the File Manager's header buttons wrap on a phone (#3295)

- The header's action row (view mode, Generate Thumbnails, Link
  External, New Folder, Tags, Purge old, Trash, Upload) could not wrap,
  so on a phone it ran past the right edge and pushed the page
  sideways. It wraps now.
- From sm up it takes only the room left next to the title and keeps
  its buttons right-aligned, so the title is not squeezed onto two
  lines on mid-width screens.

CHANGELOG.md

@@ -174,6 +174,7 @@ All notable changes to Bambuddy will be documented in this file.
 - **The frontend build no longer warns about `path` and `crypto` being externalized for the STEP previewer (#2976)** — `occt-import-js`, the Emscripten build behind STEP previews, requires both modules, but only inside its `ENVIRONMENT_IS_NODE` branches; in the browser it loads its `.wasm` from the URL the preview worker passes and draws randomness from `crypto.getRandomValues`. Vite still externalized both and printed two warnings on every build. `vite.config.ts` now drops exactly those two warnings for that one package through `build.rolldownOptions.onLog`, so an externalization anywhere else, or of any other module, still shows.
 
 ### Fixed
+- **The File Manager's buttons fit on a phone (#3295, reported by @apizz)** — The buttons at the top of the File Manager (view mode, Generate Thumbnails, Link External, New Folder, Tags, Purge old, Trash, Upload) sat in one row that couldn't wrap. On a phone they ran far past the right edge and pushed the whole page sideways. They now wrap onto more lines when the screen is too narrow, on a phone or a narrow desktop window.
 - **The print dialog's slot picker can be read on a phone held upright (#3294, reported by @apizz)** — In the Print and Schedule dialogs, the picker that chooses a printer slot for each filament was squeezed to a color dot and an arrow on a portrait phone. On printers with a nozzle rack (H2C) it had about 55 pixels. Its open list was only as wide as the picker, so the slot names couldn't be read until the phone was turned sideways.
   - **Now:** on screens narrower than 640 pixels the picker gets a line of its own under the filament the file asks for. The open list is as wide as the slot names need, up to the width of the screen, and moves left instead of running off the right edge. The same applies to the filament override picker used when printing to any printer of a model, and to the custom slot mapping shown for each printer when printing to several. On wider screens the rows are laid out as before, and a long slot name in the open list is shown in full instead of cut off.
 - **Stitching a layer timelapse no longer needs gigabytes of memory (#3292, reported by @fma965)** — ffmpeg's x264 encoder picks its number of threads from the host's cores, not the container's CPU limit, so stitching 300 frames of 1080p peaked at 1.2 GiB on a 30-core host and 120 frames of 4K at 4.6 GiB. ffmpeg runs inside Bambuddy's container and counts against its memory limit, so a pod with a 2 GiB limit was killed the moment a long print finished, and its timelapse was lost.

frontend/src/__tests__/pages/FileManagerPage.test.tsx

@@ -298,6 +298,19 @@ describe('FileManagerPage', () => {
         expect(screen.getByText('Upload')).toBeInTheDocument();
       });
     });
+
+    it('wraps the header buttons onto more lines instead of running off a narrow screen (#3295)', async () => {
+      // Up to nine controls sit in this row. Without wrapping they pushed
+      // the whole page sideways on a phone. jsdom does no layout, so this
+      // pins the classes that let the row wrap, and next to the title take
+      // only the room left over rather than squeezing the title.
+      render(<FileManagerPage />);
+
+      const upload = await screen.findByRole('button', { name: /upload/i });
+      const row = upload.parentElement as HTMLElement;
+      expect(row).toContainElement(screen.getByRole('button', { name: /new folder/i }));
+      expect(row.className.split(/\s+/)).toEqual(expect.arrayContaining(['flex-wrap', 'min-w-0', 'sm:justify-end', 'sm:flex-1']));
+    });
   });
 
   describe('stats display', () => {

frontend/src/pages/FileManagerPage.tsx

@@ -2727,7 +2727,10 @@ export function FileManagerPage() {
             {t('fileManager.subtitle')}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        {/* Wraps: up to nine controls, which pushed the page sideways on a
+            phone (#3295). Next to the title it takes only the room left over
+            (flex-1 from zero), so the title is not squeezed to fit it. */}
+        <div className="flex flex-wrap items-center sm:justify-end sm:flex-1 gap-2 min-w-0">
           {/* View mode toggle */}
           <div className="flex items-center bg-bambu-dark rounded-lg p-1">
             <button

static/index.html

@@ -26,7 +26,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-CxGVHZzK.js"></script>
+    <script type="module" crossorigin src="/assets/index-DI9-9ji2.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-aKtaBQYM.js">
     <link rel="modulepreload" crossorigin href="/assets/client-DSw2TdH4.js">
     <link rel="modulepreload" crossorigin href="/assets/react-dom-PmRWqOqI.js">
@@ -121,7 +121,7 @@
     <link rel="modulepreload" crossorigin href="/assets/ConnectionDiagnostic-jD6ObGRm.js">
     <link rel="modulepreload" crossorigin href="/assets/plateCheck-fqh7_usj.js">
     <link rel="modulepreload" crossorigin href="/assets/Layout-C9f49H5A.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-Dv5E0ZTV.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-evpNfdOF.css">
   </head>
   <body>
     <div id="root"></div>