[AlexAndBear]

Description

Second round of mobile fixes from #3542: issues that need only small code changes.

Finding	Change	Before	After
G2 – tooltips open on tap and stay open	OcTooltip.ts: remember whether the last input was touch (pointerdown.pointerType) and don't show tooltips after touch. The tooltip used to appear when a menu closed and focus went back to its trigger. Keyboard input re-enables tooltips, mouse hover is unchanged
F1 – location picker (Copy/Move to, Save as) is cramped and its "+" button covers content	LocationPickerModal.vue, FilePickerModal.vue, SaveAsModal.vue: on phones (max-sm) the modals are full screen (h-dvh, no max width/height, no rounded corners or border) and the embedded UI fills the whole body instead of 70vh. The embedded UI keeps its hamburger, search and "+" button, they are needed to switch spaces and create a target folder. The file picker and save as modals no longer hide their title, so all pickers show title and close button like Copy/Move to (on desktop too). That the "+" button covers the last row is fixed by G3 in #3549
F3 – default grid view is a single column of huge tiles	ViewOptions.vue: on mobile the persisted tile size defaults to the smallest size (1, two columns). A size chosen by the user is still kept
F5 – hints mention drag & drop, "click" and a "New" button	Touch variants of the hint texts. Empty folder (GenericSpace.vue): up to the tablet breakpoint (960px, where the "New" button is replaced by the floating "+" button) the hint is 'Use the "+" button to add files'. The breakpoint can't tell a touch tablet from a narrow desktop window, so drag & drop isn't mentioned there. Empty spaces overview (Projects.vue): "+" instead of "New" up to the tablet breakpoint (not in the original finding, same problem). Public file drop (FilesDrop.vue): phones get 'Tap the button below to select files or folders.' Desktop texts are unchanged
S2 – image crop modal shows a keyboard-only hint	ImageCropper.vue: on mobile (isMobile) the hint reads "Pinch to zoom, drag to move", desktop keeps the keyboard hint
S3 – "Set icon" emoji picker is flush to the left	OcEmojiPicker.vue: center the picker (flex justify-center), the fixed min-w-[352px] stays. The desktop modal width is handled on main already (EmojiPickerModal.vue sizes the modal to the picker). emoji-mart's dynamicWidth was tried but its rows don't account for the padding and overflow the picker
E2 – table bubble menu runs off-screen	TextEditorTableBubbleMenu.vue: the menu is centered in the visible editor area instead of under the middle of the whole table, which is off-screen for wide tables. It follows scrolling of the editor content (it only listened to window scroll before), and when it's pinned to the bottom of the viewport it moves above the active cell instead of covering it. shift keeps it inside the viewport, and it's positioned again in onShow once its actions have rendered
E3 – "…" overflow menu is drawn broken, an entry sits off-screen	TextEditorToolbar.vue, the bubble menu keeps its pill shape: the drop was limited to the width of the toolbar row (234px at 360px), now only the viewport limits it (w-max, so the measured width doesn't depend on its previous position). Groups no longer wrap internally, so nothing overflows the pill, and the separator in front of a group that starts a wrapped row is hidden. The open menu is positioned again when the toolbar resizes or other actions move into it; before, it stayed at its old position and ended up off-screen when the window got narrower (desktop too). The calculation which actions fit into the toolbar is simplified into one pass over the action widths
E4 – "…" menu stays open above modals	TextEditorToolbar.vue: close the overflow drop when a modal opens (e.g. Insert image → Image from URL)
E6 – ~30% of the width unused on phones	text-editor.css reserved 6rem (centered, so 3rem on each side) for the hover controls whenever the container is narrower than 840px. Now only the left side is reserved, and only as much as the shown controls need: TextEditorContent.vue sets --text-editor-handle-width (desktop: plus button and drag handle, 3rem; mobile: plus button only, 1.5rem). The table of contents toggle overlays the content (sticky, absolutely positioned), so no space is kept free for it. Text width at 412px: 282px → 345px of 394px
E8 – code block language selector collapses	CodeBlockComponent.vue: languages that aren't in the list (aliases like js) are added as an option, so the select isn't empty. The overlap part of E8 is in #3549
A1 – one long name pushes the actions of all rows off-screen	Users, Groups and Spaces tables use the same column config as the files table: name width: 'expand', wrap: 'truncate', actions width: 'shrink', wrap: 'nowrap'

Desktop (1440×900, compared to main): the groups table is unchanged. Hovering still shows tooltips. Intended differences: in the Users and Spaces tables the name column now truncates like in the files table, so the column widths shift slightly. The table bubble menu is now centered in the visible editor area. Desktop keeps tile size 2 as default. In narrow editor containers (< 840px) the text no longer keeps the unused 3rem on the right, the left side is unchanged.

Related Issue

• Part of Collection: layout and usability issues on mobile viewports #3542
• Fixes items G2, F1, F3, F5, S2, S3, E2, E3, E4, E6, A1 and E8 (together with fix: improve mobile layouts with css-only adjustments #3549) of Collection: layout and usability issues on mobile viewports #3542

How Has This Been Tested?

• test environment: local dev setup (pnpm vite), Playwright Chromium device emulation (Pixel 7 412px, Galaxy S8 360px) and desktop 1440×900
• test case 1: tooltips: tap a row's ⋮ and close the sheet with real touch events, no tooltip remains (it did on main); mouse hover still shows the tooltip
• test case 2: table bubble menu with a 20-column table, a 3-column table and a tall table in a long document, on desktop, 412px and 360px: first column, last column after scrolling all the way right, keyboard navigation, adding a column through the menu, scrolling the page afterwards. The menu stays centered in the visible editor area, all 8 actions stay inside the viewport and the active cell is never covered
• test case 3: "…" menu → Insert image → Image from URL: the menu is closed when the modal opens
• test case 3b: "…" menu at 320/360/412px: all actions inside the pill and the viewport, no separator at the start of a row; on desktop with the menu open, resizing the window from 1000px to 650px and back keeps the menu in one row below its trigger
• test case 4: admin Users/Groups/Spaces with long names on both devices: no horizontal overflow, actions stay in one row
• test case 4c: Copy to and Save as at 412px open full screen (412×915), at 1440px the modals keep their size; Save as and Insert image from cloud show their title and close via ✕
• test case 4b: empty folder at 412px and 800px shows the "+" hint, at 1440px the desktop hint; the public file drop page at 412px and 1440px shows the touch and the desktop hint. The empty spaces overview was not checked in the browser (the test instance has spaces)
• test case 5: crop modal: mobile shows the touch hint, resizing the same modal to 1440px switches back to the keyboard hint
• test case 6: unit tests added for the tooltip, the overflow menu and the code block language; each fails without the fix. pnpm check:types and the tests of the touched packages pass

Types of changes

• Bugfix
• Enhancement (a change that doesn't break existing code or deployments)
• Breaking change (a modification that affects current functionality)
• Technical debt (addressing code that needs refactoring or improvements)
• Tests (adding or improving tests)
• Documentation (updates or additions to documentation)
• Maintenance (like dependency updates or tooling adjustments)

[JammingBen]

The active item in the bubble menu now has fully rounded corners, was this intentional?

[AlexAndBear]

The active item in the bubble menu now has fully rounded corners, was this intentional?

Yes, but I think this was added before in another pr?