Skip to content

Improve mobile support - #157

Open
SteelCrab wants to merge 1 commit into
ekzhang:mainfrom
SteelCrab:feat/mobile-support
Open

SteelCrab wants to merge 1 commit into
ekzhang:mainfrom
SteelCrab:feat/mobile-support

Conversation

@SteelCrab

Copy link
Copy Markdown

Summary

  • On narrow screens (<640px), zoom and pan so a terminal fits the screen width below the toolbar, both on joining a session and when creating a terminal.
  • On touch devices, show an extra-keys bar (Ctrl, Esc, Tab, arrows) while a terminal is focused. Ctrl is a one-shot sticky modifier; keys keep terminal focus so the on-screen keyboard stays open, and the bar follows the visual viewport above the keyboard.
  • Move the connection status and user list below the toolbar on narrow screens so they are not covered.

Screenshots

Before After
mobile-before mobile-after
  • npm run lint, npm run build
  • iPhone viewport with touch emulation: terminal fits the width, typing reaches the shell, Ctrl → c interrupts sleep, arrow keys work
  • Desktop viewport: unchanged behavior, no touch keys

Note: in Chrome DevTools device mode, set the emulated DPR equal to the display's real DPR; otherwise xterm's WebGL canvas (sized via device-pixel-content-box) renders magnified. This is an emulation artifact, not a real-device issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant