Text editor and file viewer issues on mobile viewports #3546

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 apps that open files (text editor). Part of the mobile test in #3542.

E2. Text editor: table bubble menu runs off-screen

Fixed by #3550
Steps: Open a .md with a table → tap a cell in column C
Problem: Only 4 of 8 table actions are visible (add/delete column, delete table unreachable).
Proposal: TextEditorTableBubbleMenu.vue:57-62 sets flip: false, shift: false → enable shift: { padding: 8 } and flip, or show the actions in a bottom sheet on mobile.

E3. Text editor: "…" overflow menu is drawn broken, an entry sits off-screen

Fixed by #3550
Steps: Open a .md → tap "…" in the toolbar
Problem: Multi-row menu in a pill shape; at 360px "Link" floats outside the bubble and "Frontmatter" is beyond the viewport.
Proposal: OcBubbleMenu.vue:21 rounded-full → rounded-2xl, let groups wrap (TextEditorToolbar.vue:62-77), or use a bottom-sheet list like the other editor menus.

E4. Text editor: "…" menu stays open above modals and takes taps

Fixed by #3550
Steps: "…" → Insert image → Insert from cloud / Image from URL
Problem: The menu stays on top of the modal; taps on it changed the document while the picker was open.
Proposal: Hide the overflow drop (TextEditorToolbar.vue:65, close-on-click=false) when a sub-entry opens a modal.

E5. Text editor: wide tables scroll the whole document sideways

Fixed by #3549
Steps: Open a .md with a 5-column table → swipe on the table
Problem: The whole content scrolls; headings and code blocks are cut on the left.
Proposal: text-editor.css: .ProseMirror .tableWrapper { overflow-x: auto; }.

E6. Text editor: ~30% of the width unused on phones

Fixed by #3550
Steps: Open lorem.txt
Problem: Text column is 282px of 394px.
Proposal: text-editor.css:207-209 reserves 6rem for hover-only drag handles – add a @container (max-width: 640px) rule with max-width: 100%.

E7. Markdown: "Frontmatter" badge overlaps the frontmatter text

Fixed by #3549
Steps: Open a .md with frontmatter at 360px
Problem: The absolutely positioned badge covers the first line.
Proposal: FrontmatterComponent.vue:34-44: reserve space (padding-top on the pre) or place the badge above the block.

E8. Code block language selector collapses and overlaps code

Fixed by #3549 and #3550
Steps: Open a .md with a ```js block
Problem: The select shrinks to 20×2px over the first line and can't be tapped.
Proposal: CodeBlockComponent.vue: map aliases (js → javascript), min size for the select, top padding on the pre.

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.