[QOL] Hide keyboard shortcuts in phone mode

[VooDisss]

Description

The user needs keyboard shortcut hints to be hidden when using the application in phone mode. Currently, these shortcut combos (e.g., Ctrl + Shift + [, Ctrl + Shift + A) are displayed on mobile devices, where they occupy valuable screen real estate and are not actionable for touch-based users.

Expected Behavior

Keyboard shortcut hints should only be visible in desktop mode and should be automatically hidden when the UI detects a phone layout.

Actual Behavior

Shortcut hints are displayed at the top of the session sidebar and below the agent/model selectors on mobile layouts (tested on Galaxy A05s, Android 14, Vivaldi 7.2).

Technical Context

• Relevant File: packages/ui/src/components/instance/shell/SessionSidebar.tsx
• Environment: Galaxy A05s (Android 14, One UI 6.1), Vivaldi 7.2.3628.162, V0.10.3 dev branch.
• Code Snippets:
  • Upper shortcuts (Line 122):

    <div class="session-sidebar-shortcuts">
      <Show when={props.keyboardShortcuts().length}>
        <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
      </Show>
    </div>

  • Lower hints (Line 169):

    <div class="session-sidebar-selector-hints" aria-hidden="true">
      <Kbd shortcut="cmd+shift+a" />
      <Kbd shortcut="cmd+shift+m" />
      <Kbd shortcut="cmd+shift+t" />
    </div>

User Experience Goal

Mobile users should have a cleaner interface focused on touch interactions, removing "clutter" from keyboard shortcuts that are irrelevant to the mobile browsing experience.

Implementation Suggestions

1. Wrap with Conditional Rendering: Use the existing props.isPhoneLayout() accessor in SessionSidebar.tsx to wrap the shortcut <div> blocks in a <Show when={!props.isPhoneLayout()}> component.
2. CSS Breakpoints: Alternatively, apply responsive utility classes (e.g., hidden md:flex) to the session-sidebar-shortcuts and session-sidebar-selector-hints classes to ensure they are only visible on larger screens.

[shantur]

@CodeNomadBot

Understand how keyboard shortcut hints are implemented in packages/ui.
Then implement this change

[codenomadbot]

Implemented hiding keyboard shortcut hints in phone layout and opened PR #168.

How we detect “where the UI is running” today:

• Host runtime (electron/tauri/web): packages/ui/src/lib/runtime-env.ts inspects window.electronAPI, window.__TAURI__, and a UA fallback to set runtimeEnv.host.
• Layout mode (desktop/tablet/phone): packages/ui/src/components/instance/instance-shell2.tsx uses useMediaQuery breakpoints:
  • desktop: (min-width: 1280px)
  • tablet: (min-width: 768px)
  • else: phone
  • isPhoneLayout = layoutMode() === "phone" is passed down into SessionSidebar.

Used that existing isPhoneLayout() signal in packages/ui/src/components/instance/shell/SessionSidebar.tsx to wrap:

• the top KeyboardHint row
• the lower selector Kbd hints

So they render on tablet/desktop and are omitted entirely on phone.

Note: couldn’t run npm run typecheck in this runner because tsc isn’t available (tsc: command not found).

--
Yours, CodeNomadBot

[codenomadbot]

Implemented hiding keyboard shortcut hints in phone layout and opened PR #168.

How we already detect “phone mode” (and what this change uses):

• packages/ui/src/components/instance/instance-shell2.tsx computes layoutMode using useMediaQuery breakpoints (>=1280 desktop, >=768 tablet, else phone).
• isPhoneLayout = layoutMode() === "phone" is passed down into SessionSidebar.
• PR wraps both shortcut hint blocks in packages/ui/src/components/instance/shell/SessionSidebar.tsx with <Show when={!props.isPhoneLayout()}> so they disappear automatically on phone layouts.

Related (separate) “host runtime” detection:

• packages/ui/src/lib/runtime-env.ts sets runtimeEnv.host (electron/tauri/web) based on window.electronAPI, window.__TAURI__, and a UA fallback. This PR does not gate on host runtime since the request is strictly about phone layout, not web vs desktop-app.

--
Yours, CodeNomadBot

[codenomadbot]

Implemented the follow-up discussed in PR review: keyboard hint visibility is now centralized in the KeyboardHint component (desktop-only; hidden on tablet + phone).

• PR: fix(ui): hide keyboard hints on phone layout #168
• PR branch: codenomad/issue-166

@shantur when you have a moment, could you please check the PR branch in a tablet-width viewport (<1280px) and confirm no keyboard hint UI shows, while desktop (>=1280px) still shows hints?

--
Yours, CodeNomadBot

[shantur]

@VooDisss - Can you check the PR branch please

[shantur]

Fixed in #168