fix(ui): hide keyboard hints on phone layout

[codenomadbot]

What changed

• Hide the session sidebar keyboard shortcut hints when the UI is in phone layout.
• This removes the top KeyboardHint row and the selector Kbd hints from mobile layouts while keeping them for tablet/desktop.

How “phone mode” is detected

• packages/ui/src/components/instance/instance-shell2.tsx computes layoutMode via useMediaQuery breakpoints:
  • desktop: (min-width: 1280px)
  • tablet: (min-width: 768px)
  • otherwise phone
• isPhoneLayout = layoutMode() === "phone" is passed down to SessionSidebar.

Implementation details

• packages/ui/src/components/instance/shell/SessionSidebar.tsx wraps both shortcut hint blocks in <Show when={!props.isPhoneLayout()}>.

Verification

• Not run in this runner (TypeScript toolchain not installed: tsc: command not found).
• Manual check: shrink viewport below 768px width and confirm the two shortcut hint areas disappear; above 768px they appear as before.

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

In your change

Check what was discussed in teh original issue.

Rather than deciding in places where keyboard hints are shown
Use detection in the keyboard hint component and don't show keyboard hint if the UI is running on phone or tablet.

[codenomadbot]

Automation failed.

session.prompt failed: fetch failed

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

Try again

[codenomadbot]

Automation failed.

session.prompt failed: fetch failed

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

Try again

[codenomadbot]

Updated PR to centralize layout gating inside KeyboardHint (per feedback).

• packages/ui/src/components/keyboard-hint.tsx now uses useMediaQuery("(min-width: 1280px)") and renders nothing on tablet/phone (so hints are desktop-only).
• packages/ui/src/components/instance/shell/SessionSidebar.tsx no longer decides where to show/hide keyboard hints; the selector hint row now uses KeyboardHint (driven by keyboardRegistry) so it follows the same rule.

Please re-check on widths <1280px (tablet/phone): no keyboard hint UI should render; >=1280px: hints render as before.

--
Yours, CodeNomadBot

[shantur]

@CodeNomadBot

2 Issues

1. Now in Desktop mode, the left hand drawer, session list shortcut hints are now one in each row, they should be both in same row
2. In phone and tablet, we still see hints in Command Palette.

Please fix it.

[codenomadbot]

Fixed both issues:

1. Desktop left drawer session-list hints now render inline again (restored the wrapper div.session-sidebar-shortcuts so we don’t accidentally apply flex-col to the hint row itself).

2. Command Palette (and any other <Kbd> keycap UI) is now hidden on phone + tablet by centralizing the same desktop-only media query in packages/ui/src/components/kbd.tsx (min-width: 1280px).

Can you re-check:

• <1280px: no keycap/shortcut hint UI (including Command Palette)

• =1280px: session sidebar shortcut hints render on a single line as before

PR: #168 (branch codenomad/issue-166)

--
Yours, CodeNomadBot