Prevent gizmos from being overlapped at narrow widths

[lawsie]

Summary

• Don't obscure or partially obscure the gizmo menu at narrow screen widths (which Danny reported was a problem as a result of using it with his assistive tech software)

• When there is no vertical space for the shortcut info to be shown, hide the button (Ctrl + / still usable) and show as a modal

• Change area 5 on the area menu to cover the pill toggle at narrow widths, and put the Flock logo in this bar instead

AI usage

Claude Opus 4.8 used throughout. Design decisions, code approval and testing done by a human.

Summary by CodeRabbit

• New Features

  • Improved the keyboard shortcuts panel for narrow screens with a modal view, backdrop, and easier close behavior.
  • Added a dedicated home link in the bottom bar for faster access in compact layouts.

• Bug Fixes

  • Prevented hidden panels from appearing in narrow layouts.
  • Kept canvas content visible by adjusting layout space around the fixed bottom bar.
  • Improved keyboard focus handling so navigation stays usable across layout changes.

[coderabbitai]

Warning

Review limit reached

@lawsie, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 52 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 747d1ec8-c529-49e5-b98e-980d4425d81f

📥 Commits

Reviewing files that changed from the base of the PR and between e484df1 and a7a943f.

📒 Files selected for processing (1)

• accessibility/keyboardui.js

📝 Walkthrough

Walkthrough

This PR introduces narrow-layout detection to reconfigure keyboard shortcut area mappings and switch the ShortcutsPanel between docked and modal presentation, complete with backdrop, ARIA dialog attributes, focus trapping, and Escape handling. It also adds a bottom bar "Flock XR" home link integrated into tab order, adjusts canvas resizing to account for the fixed bottom bar, changes info panel display handling in design mode, and updates supporting CSS for narrow/portrait layouts and the new modal.

Changes

Narrow-layout accessibility and bottom bar changes

Layer / File(s)	Summary
Narrow-layout detection and shortcut remapping accessibility/keyboardui.js	Adds isNarrowLayout() breakpoint helper and remaps area shortcut labels 5 and 9 based on narrow layout and reload button connection state.
ShortcutsPanel modal lifecycle accessibility/keyboardui.js	Adds resize-driven docked/modal switching, enterModal()/exitModal() with backdrop, ARIA dialog, close button, inert page state, Tab focus trap, and layout-aware Escape focus restoration.
Bottom bar Flock XR link and tab order index.html, main/input.js	Adds a Flock XR home link in the bottom bar and includes it in the focusable tab order for narrow canvas and code-panel modes.
Canvas resize and info panel display fixes main/view.js	Subtracts fixed bottom bar overlap from canvas height calculation and clears forced inline info panel display style in design mode.
Supporting narrow-layout and modal CSS style.css	Hides the info panel in narrow/portrait layouts, styles the bottom bar flock link, and adds shortcuts-modal backdrop/panel/close styling.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ShortcutsPanel
  participant DOM

  User->>ShortcutsPanel: open panel (narrow layout)
  ShortcutsPanel->>ShortcutsPanel: enterModal()
  ShortcutsPanel->>DOM: reparent to document.body
  ShortcutsPanel->>DOM: add backdrop + ARIA dialog + close button
  ShortcutsPanel->>DOM: inert rest of page, trap Tab focus

  User->>ShortcutsPanel: press Escape or backdrop click
  ShortcutsPanel->>ShortcutsPanel: exitModal()
  ShortcutsPanel->>DOM: restore original dock location
  ShortcutsPanel->>DOM: remove backdrop, revert inert, clean up listeners
  ShortcutsPanel->>DOM: restore focus to visible tab button

Loading

Possibly related PRs

• flipcomputing/flock#595: Extends the same ShortcutsPanel implementation with narrow-layout remapping and docking↔modal lifecycle behavior.
• flipcomputing/flock#645: Modifies the same ShortcutsPanel show/hide lifecycle and focus/escape behavior in accessibility/keyboardui.js.
• flipcomputing/flock#621: Modifies accessibility/keyboardui.js inert/focus handling for overlay components, overlapping with the modal focus trapping changes here.

Suggested reviewers: tracygardner

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main narrow-width layout fix and describes the primary user-visible change.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

main/input.js (1)

85-85: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Duplicated toggle/link selector array.

The ['#canvasToggleBtn', '#codeToggleBtn', '#bottombar-flocklink'] array is now duplicated verbatim in both the canvas-mode and code-mode branches. If a future item is added to the bottom bar's tab order, it's easy to update one branch and forget the other.

♻️ Proposed fix: extract shared selector list

+      const BOTTOM_BAR_SELECTORS = ['`#canvasToggleBtn`', '`#codeToggleBtn`', '`#bottombar-flocklink`'];
+
       if (inNarrowMode && !inCodeMode) {
-        ['`#canvasToggleBtn`', '`#codeToggleBtn`', '`#bottombar-flocklink`'].forEach((sel) =>
+        BOTTOM_BAR_SELECTORS.forEach((sel) =>
           pushUnique(document.querySelector(sel))
         );
       }
       ...
       if (inCodeMode) {
-        ['`#canvasToggleBtn`', '`#codeToggleBtn`', '`#bottombar-flocklink`'].forEach((sel) =>
+        BOTTOM_BAR_SELECTORS.forEach((sel) =>
           pushUnique(document.querySelector(sel))
         );
       }

Also applies to: 190-190

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@main/input.js` at line 85, The selector list for the bottom bar toggle/link
elements is duplicated in both the canvas-mode and code-mode branches. Extract
the shared ['`#canvasToggleBtn`', '`#codeToggleBtn`', '`#bottombar-flocklink`'] list
into a single reusable constant or helper in the relevant module, and use it
from both branches so updates only need to be made once.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@accessibility/keyboardui.js`:
- Around line 871-873: The exit path in `exitModal()` is restoring the panel to
a tabpanel but leaving the `aria-labelledby` added by `enterModal()` behind.
Update the `panel` cleanup in `exitModal()` to remove the `aria-labelledby`
attribute together with `shortcuts-modal`, `role`, and `aria-modal`, so the
docked panel no longer retains the dialog label reference after closing.

---

Nitpick comments:
In `@main/input.js`:
- Line 85: The selector list for the bottom bar toggle/link elements is
duplicated in both the canvas-mode and code-mode branches. Extract the shared
['`#canvasToggleBtn`', '`#codeToggleBtn`', '`#bottombar-flocklink`'] list into a
single reusable constant or helper in the relevant module, and use it from both
branches so updates only need to be made once.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 07508f85-59a3-4567-a215-34c732549c04

📥 Commits

Reviewing files that changed from the base of the PR and between 2250043 and e484df1.

📒 Files selected for processing (5)

• accessibility/keyboardui.js
• index.html
• main/input.js
• main/view.js
• style.css