Files app layout issues on mobile viewports #3544

Initial Checklist

• I understand this is a bug report and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

Mobile problems in the Files app (lists, navigation, modals, search). Part of the mobile test in #3542.

F1. Location picker (Copy/Move to, Save as) is cramped and its "+" button covers content

Steps: File ⋮ → Copy to; or editor ⋮ → Save as
Problem: The picker embeds the full files UI (hamburger, search, app bar, own FAB). The FAB covers the list, the footer and the "File name" input.
Proposal: LocationPickerModal.vue / SaveAsModal.vue load the app with embed=true. In embed mode hide the FAB (AppFloatingActionButton.vue), the mobile hamburger (TopBar.vue:9) and the search bar (SearchBar.vue:433).

F2. Long names are clipped without ellipsis (trash, disabled spaces, upload details)

Fixed by #3549
Steps: Deleted files → Personal; a space's trash bin; disabled spaces in the Spaces list; upload a long-named file → Show details
Problem: Names are cut mid-glyph at the edge and the extension disappears (the files table truncates correctly).
Proposal: ResourceLink.vue:20 non-clickable branch <span class="inline-flex"> → inline-flex max-w-full.

F3. Default grid view is a single column of huge tiles

Fixed by #3550
Steps: Open any folder on a phone
Problem: tiles-size=2 gives one ~350×250px tile per row – about 2.5 items per screen.
Proposal: viewMode/constants.ts:8-10: use tile size 1 (two columns) or list mode below sm.

F4. Filter chips wrap unevenly

Fixed by #3549
Steps: Shares → Shared with me; search results
Problem: Wrapped chips keep a left margin and have no vertical gap.
Proposal: SharedWithMe.vue:9-57 and Search/List.vue:6: replace ml-2/mr-2 with gap-2 on the flex container, or make the row horizontally scrollable.

F5. Hints mention drag & drop, "click" and a "New" button

Steps: Open an empty space/folder; open a public file-drop link
Problem: "Drag files and folders here or use the "New" button…" / "Drop files here to upload or click the button below…" – no drag & drop on phones, and the FAB is just "+".
Proposal: Touch variants of the texts in GenericSpace.vue:508-510 and FilesDrop.vue:59 (e.g. 'Use the "+" button to add files', 'Tap the button below…').

Reproduction Steps

Mobile viewport, logged in as admin. Tested with Playwright (Chromium) device emulation: Pixel 7 (412px) and Galaxy S8 (360px). Steps per finding above.

Expected Outcome

Every view and control in this area is fully usable on a phone: nothing covered, cut off or squeezed, readable labels, reasonable touch targets.

Actual Outcome

See findings above. Part of #3542.